一个简单的 CSS/HTML 菜单答案

【问题标题】：A simple CSS/HTML menu一个简单的 CSS/HTML 菜单
【发布时间】：2014-10-02 03:31:39
【问题描述】：

我遇到了一个简单的 CSS/HTML 菜单的问题！当我将鼠标悬停在菜单的第二个声音时，子菜单会在主菜单上打开，而不是向下！为什么？

CSS代码在这里：

* {
    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;
}

HTML 代码是

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

为了更好地理解，您可以在此处查看结果：

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

抱歉，如果我发错了。这是我第一次。

【问题讨论】：

将代码放入问题中
请将代码的相关部分粘贴到问题正文中。 Stack Overflow 上的所有问题都应该根据帖子正文中包含的信息来回答。潜在的回答者不必访问外部页面来查看您的代码，而当这些实时资源的链接断开时，未来遇到类似问题的查看者将一无所知。
我编辑我的消息。对不起，这是第一次来这个网站

标签： html css drop-down-menu menu submenu

【解决方案1】：

下面是获取列表下子菜单的方法：

相关 CSS 更改：

#navbar li
{
   position: relative;  
}

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

演示：http://jsfiddle.net/NicoO/eLpz6fw8/

我还删除了浮动，因为您使用的是display: inline-block

【讨论】：

【解决方案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>

【讨论】：