'A simple CSS/HTML menu

I've a proble with a simply CSS/HTML menu! When I hover in the second voice of menu, the submenu opens over the main menu and not down! Why?

The CSS code is here:

* {
    margin: 0;
    padding: 0;
}
#navbar {
    height: 70px;
}
.navbar > li, .navbar > li > a #navbar ul {
    position: absolute;
}
#navbar, #navbar ul {
    .background {
        color:orange;
    }
}
#navbar li {
    float: left;
    list-style: none;
    line-height: 25px;
    display: inline;
}
#navbar ul li {
    display: inline-block;
    float: none;
}
#navbar li ul {
    display: none;
}
#navbar li ul li {
    list-style:none;
    margin:0;
    padding:0;
}
#navbar a {
    color: black;
    display: block;
    font-size: 20px;
    padding: 0 10px;
    text-decoration: none;
    list-style: none;
    float: left;
}
#navbar li:hover > a {
    background: red;
}
#navbar a:visited {
    display: block;
    padding: 4px 16px;
    color: #fff;
    text-decoration: none;
}
#navbar a:focus #navbar a:hover #navbar a:active {
    background-color: #D76120;
    color: #FFFFFF;
    text-decoration: none;
}
#navbar li:hover ul {
    display: block;
    position: absolute;
    width:130px;
    padding: 0;
    margin: 0 0 0 -1px;
    border:1px solid #D76120;
    background: #2D4E6C;
    font-size:.8em;
}
#navbar li li {
    border-bottom:1px solid #D76120;
    width: 130px;
}
.fa {
    font-size: 40px;
    line-height: 70px;
}
.fa-bars {
    color: #3498db;
}

the HTML code is 

<div id="navbar">
    <ul>
        <li><a href="pagina1.html"><i class="fa fa-home"></i><div>Home</div></a></li>
        <li><a href="pagina1.html"><i class="fa fa-home"></i><div>ciao</div></a>
            <ul>
                <li><a href="#">Roma</a></li>
                <li><a href="#">Milano</a></li>
                <li><a href="#">Torino</a></li>
            </ul>
        </li>
        <li><a href="pagina4.html"><i class="fa fa-home"></i><div>ciao</div></a></li>
        <li><a href="pagina5.html"><i class="fa fa-home"></i><div>ciao</div></a></li>
    </ul>
</div>

to understand better you can see the result here:

http://www.loasidelweb.netsons.org/proof/ennesimo.php

sorry if I posted wrong. this is the first time for me.

htmlcssdrop-down-menumenusubmenu


Solution 1:[1]

Here is a way to get the sub-menu under the list:

Relevant CSS changes:

#navbar li
{
   position: relative;  
}

#navbar li:hover ul {
    top:100%;    
}

Demo: http://jsfiddle.net/NicoO/eLpz6fw8/

I also removed the floating since you are using display: inline-block

Solution 2:[2]

<html>

<head>
    <title>Drop Down Menu</title>
    <style>
        /* main menu css */
        ul li {
            list-style: none;
            float: left;
            margin-left: 10px;
        }

        ul li a {
            text-decoration: none;
            color: red;
        }

        /* drop down css */
        ul li ul {
            visibility: hidden;
        }

        ul li:hover ul {
            visibility: visible;
        }
    </style>[Learn From Video][1]
</head>

<body>
    <ul>
        <li><a href="">Home</a></li>
        <li>
            <a href="">About</a>
            <ul>
                <li><a href="">About Us</a></li>
                <li><a href="">About Company</a></li>
            </ul>
        </li>
        <li>
            <a href="">Services</a>
            <ul>
                <li><a href="">Services 1</a></li>
                <li><a href="">Services 2</a></li>
            </ul>
        </li>
        <ul>
</body>

</html>

Solution 3:[3]

Here is a very simple cool menu, using details element, for those passing by.

.coolmenu {
    width: 100%;
    border: 1px solid #ccc;
    color: #ccc;
    margin: 0;
    height: 2rem;
    white-space: nowrap; /* Allow larger boxes */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.submenu > p {
    padding: 1rem;
    margin: 0;
}

.submenu > p:hover {
    padding: 1rem;
    margin: 0;
    background: lightblue;
    color: black
}

.submenu summary {
    background: black;
    padding: 0.5rem;
}

.submenu[open] {
    outline: 5px black solid;
    z-index: 1;
    cursor: pointer;
    background: blue;
}

.submenu[open] summary::after {
    content: '?';
    float: right;
}
<div class="coolmenu">

    <details class="submenu">
      <summary>Configure</summary>
        <p>
          Some stuffs
        </p>
    </details>
    
    <details class="submenu">
      <summary>Options</summary>
        <p>
          More cool
        </p>
        <p>
          stuffs
        </p>
    </details>
    
    <details class="submenu">
      <summary>Tools</summary>
        <p>
          The container can overflow
        </p>
    </details>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nico O
Solution 2 Martin Brisiak
Solution 3 NVRM

Related Questions