Question

我已经做了几次尝试，结果却让人感到困惑。对于简单的水平CSS菜单，当前的HTML和CSS似乎工作得很好。我正在努力将子项目从当前的<li>元素中删除。

我试图让它们显示在当前菜单项下方，并具有与我现在相同的悬停效果。任何援助将不胜感激。我承认自己不是CSS专业人士。

当前HTML：

<div class="MenuTop">
    <ul class="Nav">
    <li><a href="Home.aspx" title="Home">Home</a></li>
        <li><a href="Vehicles.aspx" title="Vehicles">Vehicles</a>
            <ul>
                 <li><a href="SubItem.aspx" title="SubOne">SubItemOne</a></li>
            </ul>
        </li>
        <li><a href="About.aspx" title="About">About</a></li>
        <li><a href="Contact.aspx" title="Contact">Contact</a></li>
        <li><a href="News.aspx" title="News">News</a></li>
    </ul>   
</div>

当前的CSS：

.MenuTop
{
    width: 960px;
    background-color: Black;
    color: #fff;
    margin: auto auto 0px auto;
    padding: 5px;
    height:auto;
    font-family: Segoe UI, Arial;
    font-weight:bold;
    min-height:15px;
}
.MenuTop ul
{
    float: left;
    list-style: none;
    margin: -5px ;
    padding: 0px;
}
.MenuTop li 
{
    float: left;
    font-size:12px;
    font-family: Segoe UI, Arial;
    margin: 0;
    padding: 0;
}
.MenuTop a 
{
    background-color: Black;
    color: #fff;
    display: block;
    float: left;
    margin: 0;
    padding: 4px 12px 4px 12px;
    text-decoration: none;
}
.MenuTop a:hover 
{
    background-color: #404040;
    color: #fff;
    padding: 4px 12px 4px 12px;
}

Answer 1

你很接近，但是你忘记了将子菜单项绝对地放到你的父li菜单项并隐藏它，使用display:none然后在悬停时显示它，所以试试这样的事情可以达到这个效果：

<强> CSS

.Nav li {
    position:relative;
}

.Nav li ul {
    display:none;
    position:absolute;
    top:30px;
}

.Nav li:hover ul {
    display:block;
}

此外，您的子菜单ul未正确关闭，请继续关闭。

Ninja编辑：demo，顺便说一下，通过使用您提供的类.Nav而不是其容器的父类.MenuTop来正确定位菜单，您可以获得极大的好处，{{ 1}}，这样你就可以单独定位菜单和菜单，而不是你可能放在容器内的任何其他元素，

Answer 2

我已经在jsFiddle上为你创建了一个工作example。

HTML如下：

<nav>
    <ul class="cf">
        <li><a href="#">Home</a></li>
        <li><a  href="#">Vehicles</a>
            <ul>
                <li><a href="#">Sub-menu Item 1</a></li>
                <li><a href="#">Sub-menu Item 2</a></li>
                <li><a href="#">Sub-menu Item 3</a></li>
            </ul>
            </li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
    </ul>
</nav>

和CSS：

nav ul {
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}
nav a {
     font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

    display: block;
    font: bold 14px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
}


nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 1em;
    visibility: hidden;
    z-index: 1;
}

nav li:hover ul {
    opacity: 1;
    top: 1em;
    visibility: visible;

}
nav li ul li {
    float: none;
    width: 100%;
}
.cf:after, .cf:before {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

简单的CSS下拉菜单

2 个答案: