Interactive Navigation System Featuring Nested Dropdowns in HTML and CSS

I've been working on creating a customized navigation bar with sub menus using simple coding to keep it lightweight, but I'm encountering issues with the functionality. Could you please take a look at this code and fiddle link: Fiddle https://jsfiddle.net/tjmkf9sb/

My goal is to have hoverable submenus, but currently, they are not responding correctly to the display: none property. Any assistance would be greatly appreciated.

CSS

.menu {
    border: 1px solid aliceblue;
    margin-top: 55px;
    margin-left: auto;
}
.menu li {
    list-style: none;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    background: red; 
    display: inline;
}
.menu li:hover {
    background: red; 
}
.menu a:hover {
    text-decoration: none;
}
.menu li ul {
    display: block;
}
.submenu ul {
  display: none;
  position: absolute;
}

HTML

<div class="menu">
  <ul>
    <a href="dashboard.php"><li>Dashboard</li></a>
    <a href="dashboard.php">
      <li class="submenu">
        Licence Orders
        <ul class="dropdown">
          <li>Paid Orders</li>
          <li>Unpaid Orders</li>
        </ul>
      </li>
    </a>
    <a href="dashboard.php"><li>Dashboard</li></a>
    <a href="logout.php"><li>Logout</li></a>
  </ul>
</div>

I would really appreciate any guidance or assistance as I've been struggling with this issue for some time now.

htmlcss

Answer №1

Include:

.menu li ul {
    display: none;
}

.menu li:hover ul {
    display: block;
}


.menu {
border: 1px solid aliceblue;
margin-top: 55px;
margin-left: auto;
}
.menu li {
list-style: none;
padding: 15px;
border-radius: 5px;
color: #fff;
background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #1fc8db, #2cb5e8); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #1fc8db, #2cb5e8); /* Standard syntax */
display: inline;
}
.menu li:hover {
background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #26cfe3, #1aade4); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #26cfe3, #1aade4); /* Standard syntax */
}
.menu a:hover {
text-decoration: none;
}
.menu li ul {
display: none;
}

.menu li:hover ul {
  display: block;
}
.submenu ul {
  display: none;
  position: absolute;
}
<div class="menu">
  <ul>
    <li><a href="dashboard.php">Dashboard</a><li>
    <li class="submenu">
      <a href="dashboard.php">Licence Orders</a>
      <ul class="dropdown">
        <li>Paid Orders</li>
        <li>Unpaid Orders</li>
      </ul>
    </li>
    <li><a href="dashboard.php">Dashboard</a></li>
    <li><a href="logout.php">Logout</a></li>
  </ul>
</div>

Customize using your own specifications.

Modify: Ensure only li elements are children of ul.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for matching the height of a child div to its parent's height:

Is there a way to ensure that the height of the child div matches the height of the parent div without explicitly setting it in the CSS? Even when the parent div has a height of 300px, the child divs car1front and card1back do not seem to adjust accordingl ...

javascripthtmlcss

CSS3: What is causing this issue in FireFox?

http://jsfiddle.net/tNg2B/ It's clear that there is a noticeable difference when viewing this in Chrome compared to Firefox. The ":before" and ":after" pseudo classes seem to be malfunctioning in Firefox. Is there a way to resolve this issue? Edit: ...

firefoxcss

Issues with fundamental JavaScript client-side code

As a newcomer to the world of javascript and jQuery, I am diving into my first experiment with javascript. My initial focus has been on changing questions by clicking next or previous buttons. The goal is to create a dynamic quiz webpage that updates quest ...

javascriptjqueryhtml

Positioning the radio tag in perfect alignment with the adjacent image

I am struggling to align my radio buttons with the image placed beside them. The image has a width of 260 pixels and a height of 88 pixels, while the radio buttons are enclosed within a table. Although I attempted the following CSS code, it did not produ ...

cssimagehtml-table

Creating a dynamic webpage using Javascript that responds to user clicks on page links

I am interested in the process of inserting JavaScript objects from a JSON file in order to dynamically create a unique page based on a user's clicked link. This concept is similar to having a wildcard page in popular frameworks like Laravel or Django ...

javascriptjqueryhtmljsonajax

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect

The div in JavaScript is expanding properly, but it is not contracting back as expected

I'm experiencing an issue with a div element that I created. My goal is to have it expand when a link is clicked and collapse when the same link is clicked again. At the moment, the div expands correctly but does not collapse as expected. Any assistan ...

javascripthtmlcss

What sets apart custom events from postMessage?

If you want to send a message to another document, such as an iframe, there are two functions you can use - postMessage and createEvent. Consider the following: var event = document.createEvent('CustomEvent'); event.initCustomEvent("message", tr ...

javascripthtmlpostmessagecustom-events

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

As someone transitioning from a jQuery background to learning AngularJS, I am facing challenges with what should be simple tasks. The particular issue I am struggling with involves dynamically adding HTML and binding it to a controller in a way that suits ...

javascriptjqueryhtmlangularjsasp.net-mvc

"Position the input file with Bootstrap's input text for a seamless alignment

After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...

css

Set a variable to a specific cell within a table

I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...

javascripthtmlcss

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element

My customized jQuery and HTML code achieves the following purpose: There is a placeholder image that can be clicked by the user, triggering a file selection dialog to open. Once a file is chosen, the corresponding multipart form is sent to the server. To ...

htmljqueryajaxfile-uploadjquery-events

Dynamic resizing of grids using React and TypeScript

I'm attempting to create a dynamic grid resizing functionality in React and TypeScript by adjusting the lgEditorSize value on onClick action. Setting the initial lgEditorSize value const size: any = {}; size.lgEditorSize = 6; Adjusting the lgEditorS ...

javascriptcssreactjstypescriptbootstrap-4

Displaying PHP strings with spacesFeel free to let me know

I have two files named "index.php" and "output.php". In the index.php file, there is a dropdown list populated with all Italian city names fetched from a MySQL table. The objective of my test case is to select a city from the dropdown list and send its val ...

phphtmlmysqlweb

Navigating to an element within a span tag: Selenium

Hey there! I'm currently working on automating a task in Selenium WebDriver using Java, and I need to figure out how to click on a specific button that has the text "€11" on it. This button is embedded within this structure, and there happens to be ...

javacssseleniumselenium-webdriverqwebelement

Positioning the slider based on the width

I've created a slider on my website: However, I noticed that when I slide to the right, there is some space between the image and the edge of the container. Despite setting everything's width to 1100px, I can't figure out where this extra s ...

jquerycss

Creating an HTML form in Django using forms.py

I created a Django web application that includes an authentication system. Within this system, I have a user registration view, a customer model, and a UserCreationForm in forms.py: class CustomerSignUpForm(UserCreationForm): first_name = forms.CharFie ...

htmldjangoauthenticationdjango-modelsdjango-forms

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

javascripthtmlaudiovideo

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Adjust the size of a Highcharts chart before printing

I'm facing an issue with a chart that doesn't have a specified height or width. My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original di ...

javascriptjqueryhtmlcsshighcharts