Question

我一直在尝试显示CSS的下拉菜单，但它似乎无法正常工作;任何人都能指出我正确的方向吗？我一直在查看示例和实现部分，但似乎没有任何工作。

这是我的HTML代码：

<ul id="menu"> 
    <li><a href="Default.asp">Home</a></li>
        <ul id="subHome">
            <li><a href="Customers.asp">Customers</a></li>
        </ul>
    <li><a href="Customers.asp">Data</a></li>
    <li><a href="Register.asp">Register</a></li>
    <li><a href="Login.asp">Login</a></li>
</ul>

这是我的CSS代码：

/*header*/

#menu {
    margin-left: -50px;
    margin-right: -50px;
    background-color: #4cff00; 
    line-height: none;
    border-radius: 4px 4px;
    margin: 0px;
}

#menu li {
    display: inline-table;
}

#menu li a {
    color: #000;
    padding: 0px 140px;
    text-decoration: none;
}

#subHome {
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}

#subHome li {
    display:block;
    width:120px;
    float:none;
}

#menu li a:hover {
    background-color: red;
    border-radius: 4px 4px;
} 

ul#menu li #subHome li a {
    color: #f00;
}

ul#menu li #subHome li a:hover {
    background: #333;
    color: #fff;
}

#menu li:hover ul{
    display: block;
}

Answer 1

我会将第二个<ul>放入<li>。正如您在https://developer.mozilla.org/docs/Web/HTML/Element/ul（嵌套列表）中所看到的那样。

<ul class="menu"> 
    <li><a href="Default.asp">Home</a>
        <ul>
            <li><a href="Customers.asp">Customers</a></li>
        </ul>
    </li>
    <li><a href="Customers.asp">Data</a></li>
    <li><a href="Register.asp">Register</a></li>
    <li><a href="Login.asp">Login</a></li>
</ul>

首先使用较少的css代码怎么样？试试这个：

ul.menu li ul {
    display: none;
}

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

我希望这会对你有所帮助。

Answer 2

$(document).ready(function(){
$('ul > li').mouseover(function(){$('#subHome').css('display','block');});$('ul > li').mouseout(function(){$('#subHome').removeAttr('style');});});

Answer 3

<ul class="menu"> 
 <li><a href="#">Home</a>
     <ul>
        <li><a href="#">Link</a></li>
    </ul>     </li>  </ul>

ul.menu li{
    position:relative;
    list-style:none;
    float:left;
    padding:10px 20px;
    border:1px solid red; }  

ul.menu li ul {    
opactiy:0;    
transition:all 0.5s linear 1s;//slow speed effect   
position:absolute:    top:20px; } 
ul.menu li:hover ul {    top:0px;   
opactiy:1;    transition:all 0.5s linear 1s;  
}

我无法使用此下拉菜单来使用CSS

3 个答案: