Question

我尝试创建一个水平菜单，其中包含一个菜单按钮（关于我）的下拉菜单。到目前为止，我尝试了以下内容：

HTML：

<body>
    <div id="main">
        <div class="menubar">
            <h2 id="h2">Alex</h2>
            <hr class="style-two" />
            <ul>
                <li><a href="">home</a></li>
                <li>
                    <a href="">about me</a>
                    <ul>
                        <li><a href="">employment           </a></li>
                        <li><a href="">relevant experience  </a></li>
                        <li><a href="">education            </a></li>
                    </ul>
                </li>
                <li><a href="">linkedin</a></li>
            </ul>
        </div>
    </div>


</body>

CSS代码：

<style type="text/css">
#title {
    padding: 3px 15px;  
    font-family:"Courier New", Courier, monospace;
    color: #000;
    font-size:40px;
    text-align: center;
}
#main {
    width: 100%;
    background-color: #565656;
    text-align: center;
    font-family:"Courier New", Courier, monospace;
}

.menubar {
    margin: 0 auto;
    width: 700px;
    background-color: #FFF;
    z-index: 2;
    text-align: center;
    padding: 0;
    font-size: 0.9em;
}

ul {
    list-style-type: none;
    padding: 0;
    overflow:hidden;
}

ul li {
    z-index: 4;
    display:inline-block;
}

ul a {
    color: #000000;
    margin: 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 3px 15px;
}

ul a:hover {
    color: #ff9999;
    margin: 0px 0px;
    padding: 3px 15px;
    background-color: #fff;
}


ul li ul {
    display: none;
    position: absolute;
    float: left;
    width: 150px;
    list-style-type: none;
    padding: 0;
}

ul li ul li {
    background-color: #ffffff;
    border-width: 0 0px 0px 0px;
    z-index: 100;
}

ul li ul li a {
    width: 200px;
    color: #03C;
    text-align: left;
    margin: 0px 0px;
    padding: 3px 15px;
}

ul li ul li a:hover {
    color: #3C0;
    background-color: #FFF;
}



hr.style-two {
    border: 0;
    height: 1px;
    width: 100%;
    align: left;
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#h2 { 
    font-weight:normal; 
    padding: 3px 0px;   
    margin: 0px 0px 0px 0px;
    font-family:"Courier New", Courier, monospace;
    color: #000;
    font-size:40px;
    text-align: center;
    float: none;
    display: block;
}

上述代码的小提琴链接是here。

如果我在下面的代码部分删除display: none，子菜单就会显示出来。不知道这里发生了什么。任何指针都将不胜感激！

ul li ul {
    display: none;
    position: absolute;
    float: left;
    width: 150px;
    list-style-type: none;
    padding: 0;
}

Answer 1

http://jsfiddle.net/vnLgZ/1/

ul li:hover ul { display: block; }

如果您最终添加另一个包含子菜单的顶级菜单项，这也会有效。

这个CSS代码所说的是，当你将鼠标悬停在无序列表中的任何li时，其子元素为ul，它将显示块ul。覆盖以前在其上设置的显示。

当鼠标悬停在按钮上时，下拉菜单不会显示

1 个答案: