Tips for positioning and styling submenu on dropdown using CSS

Question

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles?

nav ul {list-style-type: none; overflow: hidden; background: #000; position: relative;}
nav li {float: left;}
nav li > a {padding: 15px 15px; display: inline-block; text-decoration: none; color: white; text-align: center;}
nav li > a:hover {background: violet;}

nav ul ul { position: absolute; background: green; top: 100%;}
nav ul ul li > a:hover {color: red;}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample UL</title>
    <style media="screen">

    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <ul>
          <li><a href="#">submenu 1</a></li>
          <li><a href="#">submenu 2</a></li>
        </ul>
      </ul>
    </nav>
  </body>
</html>

html css

Answer 1

Answer №1

Your code contains multiple errors, with the most critical one being the top: 100% styling on the submenu container, causing it to move outside the visible area.

In addition, it is crucial to set the submenu header li as position: relative, and the submenu ul should have a default display: none property which changes to display: block on hover. It's also essential to place the submenu container inside the respective li acting as its header. Check out the corrected code below:

nav ul {
  list-style-type: none;
  background: #000;
}

nav li {
  display: inline-block;
  position: relative;
}

nav li>a {
  padding: 15px 15px;
  display: inline-block;
  text-decoration: none;
  color: white;
  text-align: center;
}

nav li>a:hover {
  background: violet;
}
nav ul li ul {
  display: none;
  position: absolute;
  top: 45px;
  left: 0px;
  width: 100px;
  overflow: visible;
  padding: 0;
}
nav ul li:hover ul {
  display: block;
}
nav ul ul li {
  background: green;
  display: block;
}
nav ul ul li>a:hover {
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sample UL</title>
  <style media="screen">

  </style>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a>
        <ul>
          <li><a href="#">submenu 1</a></li>
          <li><a href="#">submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

</html>

Answer 2

Your code contains multiple errors, with the most critical one being the top: 100% styling on the submenu container, causing it to move outside the visible area.

In addition, it is crucial to set the submenu header li as position: relative, and the submenu ul should have a default display: none property which changes to display: block on hover. It's also essential to place the submenu container inside the respective li acting as its header. Check out the corrected code below:

nav ul {
  list-style-type: none;
  background: #000;
}

nav li {
  display: inline-block;
  position: relative;
}

nav li>a {
  padding: 15px 15px;
  display: inline-block;
  text-decoration: none;
  color: white;
  text-align: center;
}

nav li>a:hover {
  background: violet;
}
nav ul li ul {
  display: none;
  position: absolute;
  top: 45px;
  left: 0px;
  width: 100px;
  overflow: visible;
  padding: 0;
}
nav ul li:hover ul {
  display: block;
}
nav ul ul li {
  background: green;
  display: block;
}
nav ul ul li>a:hover {
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sample UL</title>
  <style media="screen">

  </style>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a>
        <ul>
          <li><a href="#">submenu 1</a></li>
          <li><a href="#">submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

</html>

Answer 3

Answer №2

nav ul {
            list-style-type: none;
            overflow: hidden;
            background: #000;
            position: relative;
        }

        nav li {
            float: left;
        }

        nav li > a {
            padding: 15px 15px;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
        }

        nav li > a:hover {
            background: violet;
        }

        nav ul ul {
            background: green;
            top: 100%;
        }

        nav ul li a + ul {
            display: none;
        }

        nav ul li a:hover + ul {
            display: block;
        }
        
        .sub-menu:hover {
            display: block;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sample UL</title>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="sub-menu">
                <li><a href="#">submenu 1</a></li>
                <li><a href="#">submenu 2</a></li>
            </ul>
        </li>
    </ul>

</nav>
</body>
</html>

Answer 4

nav ul {
            list-style-type: none;
            overflow: hidden;
            background: #000;
            position: relative;
        }

        nav li {
            float: left;
        }

        nav li > a {
            padding: 15px 15px;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
        }

        nav li > a:hover {
            background: violet;
        }

        nav ul ul {
            background: green;
            top: 100%;
        }

        nav ul li a + ul {
            display: none;
        }

        nav ul li a:hover + ul {
            display: block;
        }
        
        .sub-menu:hover {
            display: block;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sample UL</title>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="sub-menu">
                <li><a href="#">submenu 1</a></li>
                <li><a href="#">submenu 2</a></li>
            </ul>
        </li>
    </ul>

</nav>
</body>
</html>

Answer 5

Answer №3

Give this a shot and see what you can pick up from it.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

Answer 6

Give this a shot and see what you can pick up from it.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

Answer 7

Answer №4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>example Unordered List</title>
    <style media="screen">
    </style>
  </head>
  <body>
    <nav class="clearfix">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
          <ul class="submenu">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
          </ul></li>
      </ul>
    </nav>
  </body>
</html>

For detailed explanation, see this Clearfix guide

Add "clearfix" class to nav and "submenu" class to inner ul as mentioned in the previous text

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

.clearfix {
    zoom:1;
}

nav {
    background: #333A31;
    height: 2.3em;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
ul {
    background: #D5333C;
    height: 2em;
    width: 100%;
}
li {
    position: relative;
}
li a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
}
li a:hover {
    background: #9155311;
    height: 2em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
}
.current, a:hover.current {
    background: #AD9B7F;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
    float: none;
    background: #916A31;
    width: auto;
    height: auto;
    position: absolute;
    top: 2em;
    left: -9000em;
}
ul.submenu li {
    float: none;
}
nav li:hover ul {
    left: 0;
}
ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #D5973C;
    height: 2em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
}

Hope this explanation is helpful.

Answer 8

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>example Unordered List</title>
    <style media="screen">
    </style>
  </head>
  <body>
    <nav class="clearfix">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
          <ul class="submenu">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
          </ul></li>
      </ul>
    </nav>
  </body>
</html>

For detailed explanation, see this Clearfix guide

Add "clearfix" class to nav and "submenu" class to inner ul as mentioned in the previous text

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

.clearfix {
    zoom:1;
}

nav {
    background: #333A31;
    height: 2.3em;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
ul {
    background: #D5333C;
    height: 2em;
    width: 100%;
}
li {
    position: relative;
}
li a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
}
li a:hover {
    background: #9155311;
    height: 2em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
}
.current, a:hover.current {
    background: #AD9B7F;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
    float: none;
    background: #916A31;
    width: auto;
    height: auto;
    position: absolute;
    top: 2em;
    left: -9000em;
}
ul.submenu li {
    float: none;
}
nav li:hover ul {
    left: 0;
}
ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #D5973C;
    height: 2em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
}

Hope this explanation is helpful.

Tips for positioning and styling submenu on dropdown using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing class changes based on scroll events in JavaScript

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

What is the best way to retrieve the elements stored within the 'this' object I am currently manipulating?

Unusual characters found in the fields of a Postgresql database table

I am experiencing an issue where certain HTML classes are not applying the CSS code properly within my PHP file

Formatting issue with selecting checkboxes in Primefaces DataTable filter menu

Visual feedback: screen flashes upon clicking to add a class with jQuery

What is the best way to dynamically swap out an image within an element?

Instructions for adding and deleting input text boxes on an ASP.NET master page

Django CSS not loading properly on webpage after initial load

Most Effective Method for Switching CSS Style Height from "0" to "auto"

Troubleshooting Problem with Responsive Bootstrap Navbar

A method designed to accept an acronym as an argument and output the corresponding full name text

What is the best method to make a hyperlink within an IFrame open in a new window?

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

Unable to supersede CSS module styling using global or external stylesheets in React, Next.js, or React Native

I keep receiving unexpected security alerts in Firefox without any specific cause

implementing a vertical separator in the main navigation bar

Is Next.js experiencing issues with animating presence specifically for exit animations?

The Date Filter is causing a glitch in formatting the date value