Attempting to design a CSS3 drop-down menu

Question

Attempting to design a CSS3 drop-down menu

I've been struggling to get this right, but I can't seem to make the sub list appear! I attempted using

nav > ul > li:hover > ul{}

, but it ended up causing issues with the code functionality. It seems like a simple problem, but I just can't figure it out.

nav > ul {
  list-style: none;
}
nav > ul > li {
  padding: 20px;
  float: left;
}
nav > ul > li {
  background-color: #fff;
}
nav > ul > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav > ul > ul > li {
  float: none;
  width: 200px;
}
nav > ul > li:hover {
  color: #4169E1;
  display: block;
  visibility: visible;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Secure</li>
    <ul>
      <li>How secure are we?</li>
      <li>We are not secure enough!!</li>
    </ul>
    <li>Mad</li>
  </ul>
</nav>

html css

Answer 1

Answer №1

Streamline your selectors (nav ul ul) for better performance
Set the parent li's position: relative so that the dropdowns with position: absolute are accurately positioned in relation to them. Adjust the top value accordingly
In this scenario, the use of visibility: visible is redundant. Instead, utilize display: none and display: block to manage visibility
Ensure proper nesting of lists as demonstrated below:

<ul>
    <li>Top Menu Item
        <ul>
            <li>Sub-menu Item</li>
        </ul>
    </li>
</ul>

For further information, visit: Nested lists on w3.org

CSS / HTML / Demo

* {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav ul ul li {
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us
      <ul>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
      </ul>
    </li>
    <li>Secure
      <ul>
        <li>How secure are we?</li>
        <li>We are not secure enough!!</li>
      </ul>
    </li>
    <li>Mad</li>
  </ul>
</nav>

Answer 2

Streamline your selectors (nav ul ul) for better performance
Set the parent li's position: relative so that the dropdowns with position: absolute are accurately positioned in relation to them. Adjust the top value accordingly
In this scenario, the use of visibility: visible is redundant. Instead, utilize display: none and display: block to manage visibility
Ensure proper nesting of lists as demonstrated below:

<ul>
    <li>Top Menu Item
        <ul>
            <li>Sub-menu Item</li>
        </ul>
    </li>
</ul>

For further information, visit: Nested lists on w3.org

CSS / HTML / Demo

* {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav ul ul li {
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us
      <ul>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
      </ul>
    </li>
    <li>Secure
      <ul>
        <li>How secure are we?</li>
        <li>We are not secure enough!!</li>
      </ul>
    </li>
    <li>Mad</li>
  </ul>
</nav>

Answer 3

Answer №2

Identifying Errors

   <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Secure
           <ul> **--> This should be inside li** 
                <li>How secure are we?</li>
                <li>We are not secure enough!!</li>
            </ul>
        </li>

        <li>Mad</li>
    </ul>

Additionally, in your css

Include the following snippet:

nav > ul > li:hover > ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

View the fiddle http://jsfiddle.net/ruchan/4fk6y2wu/

Answer 4

Identifying Errors

   <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Secure
           <ul> **--> This should be inside li** 
                <li>How secure are we?</li>
                <li>We are not secure enough!!</li>
            </ul>
        </li>

        <li>Mad</li>
    </ul>

Additionally, in your css

Include the following snippet:

nav > ul > li:hover > ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

View the fiddle http://jsfiddle.net/ruchan/4fk6y2wu/

Answer 5

Answer №3

Enhance your website with the power of CSS3!

Check out the Demo here

View in Fullscreen mode

<nav>
    <ul id="menu">
        <li class="category top_level"><a class="selected" href="#">Home</a></li>
        <li class="category top_level"><a href="#">About</a></li>
        <li class="category top_level"><a href="#">Secure</a>
                    <ul class="dropdown">
                <li class="item"><a href="#">How secure are we?</a></li>
                <li class="item"><a href="#">We are not secure enough!!</a></li>
            </ul>
        </li>
        <li class="category top_level last"><a href="#">Mad</a>
        </li>
    </ul>
</nav>

CSS Styles

body {
    font-family:'Montserrat', sans-serif;
    background:#000;
}
ul {
    list-style-type: none;
}
#menu a {
    text-decoration: none;
    white-space: nowrap;
    color: #222;
    background-color: #fff;
}
#menu li.top_level {
    vertical-align: top;
    zoom: 1;
    display: block;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    position: relative;
    text-align:center;
}
#menu li.last {
    margin-right: 0px;
}
#menu .dropdown {
    float: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
    height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
    line-height:2em;
    display:block;
    padding:.6em;
    border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
    background:#007dac;
    -webkit-transition: background-color 940ms;
    -moz-transition: background-color 940ms;
}
#menu a.selected {
    color: #ffffff;
    background-color: #007dac;
}

Answer 6

Enhance your website with the power of CSS3!

Check out the Demo here

View in Fullscreen mode

<nav>
    <ul id="menu">
        <li class="category top_level"><a class="selected" href="#">Home</a></li>
        <li class="category top_level"><a href="#">About</a></li>
        <li class="category top_level"><a href="#">Secure</a>
                    <ul class="dropdown">
                <li class="item"><a href="#">How secure are we?</a></li>
                <li class="item"><a href="#">We are not secure enough!!</a></li>
            </ul>
        </li>
        <li class="category top_level last"><a href="#">Mad</a>
        </li>
    </ul>
</nav>

CSS Styles

body {
    font-family:'Montserrat', sans-serif;
    background:#000;
}
ul {
    list-style-type: none;
}
#menu a {
    text-decoration: none;
    white-space: nowrap;
    color: #222;
    background-color: #fff;
}
#menu li.top_level {
    vertical-align: top;
    zoom: 1;
    display: block;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    position: relative;
    text-align:center;
}
#menu li.last {
    margin-right: 0px;
}
#menu .dropdown {
    float: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
    height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
    line-height:2em;
    display:block;
    padding:.6em;
    border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
    background:#007dac;
    -webkit-transition: background-color 940ms;
    -moz-transition: background-color 940ms;
}
#menu a.selected {
    color: #ffffff;
    background-color: #007dac;
}

Attempting to design a CSS3 drop-down menu

Answer №1

Answer №2

Answer №3

Similar questions

Failure of event watcher on dynamically updated content

The Node.contains() function in JavaScript does not verify the presence of inner child elements

JavaScript's jQuery selector retrieves a child element from one location and adds it to a different

Place the span element above the div container

Alignment issue detected with the text for radio buttons

Tips for changing the contents of a div when a particular link is clicked

When initiating payment through Razorpay by clicking "Pay Now" with a card or wallet, a new tab opens showing a blank page with a blocked message,

Conceal column exclusively on smaller displays using Bootstrap 4

Checkbox input with alphabetical ordering

Angular Email Pattern Validation: Ensuring Email Formatting is Correct

How can I reset a CSS position sticky element using JavaScript?

Discovering the following div

What are the advantages and disadvantages of using the picture element in web design?

Interacting with the DOM using jQuery's .post() method

What is the best way to merge two values with the same property in an object using a comma as a separator

Tips for saving the visibility status of a <div> in your browser bookmarks?

Elementor custom CSS for Wordpress header

Bootstrap 4 did not achieve the desired responsiveness for the image and h1 element

Disappearance of logo div causes video to vanish

Looking for assistance in translating HTML code into an XpathQueryString?