A simply CSS/HTML menu

Question

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.

Please paste the relevant parts of your code into the body of the question. All questions on Stack Overflow should be answerable based on information contained within the body of the post. Potential answerers shouldn't have to visit an external page to view your code, and future viewers experiencing similar problems will be left in the dark when the links to these live resources break. — esqew, Aug 08 '14 at 15:38
I edit my message. Sorry but it's the first time in this site — jumpy83, Aug 08 '14 at 16:00

score 0 · Answer 1 · answered Aug 08 '14 at 16:35

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

score 0 · Answer 2 · edited Feb 24 '21 at 07:06

<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>

A simply CSS/HTML menu

2 Answers2