Html 下拉菜单不显示'；鼠标悬停在按钮上时不显示_Html_Css_Drop Down Menu

Html 下拉菜单不显示'；鼠标悬停在按钮上时不显示

html css drop-down-menu

Html 下拉菜单不显示'；鼠标悬停在按钮上时不显示,html,css,drop-down-menu,Html,Css,Drop Down Menu,我试图创建一个水平菜单，其中包括一个菜单按钮（关于我）的下拉菜单。到目前为止，我尝试了以下方法： HTML: 如果您最后添加了另一个具有子菜单的顶部菜单项，那么这也会起作用这段CSS代码的意思是，当您将鼠标悬停在无序列表中的任何li上时，它的子元素是ul，它将显示该ul块。覆盖以前设置的显示内容。太棒了！！谢谢你的解释！：-） <body> <div id="main"> <div class="menubar">

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

HTML:

如果您最后添加了另一个具有子菜单的顶部菜单项，那么这也会起作用

这段CSS代码的意思是，当您将鼠标悬停在无序列表中的任何li上时，它的子元素是ul，它将显示该ul块。覆盖以前设置的显示内容。

太棒了！！谢谢你的解释！：-）

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

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

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

ul li:hover ul { display: block; }