Question

HTML code：

<html>
    <head>  
        <link rel="stylesheet" type="text/css" href="menu3.css">
            <title>Menu Bar</title>
        </head>
    <body>
    <div id="nav">
        <ul id="menu">
            <li><a href="www.tech.com">home</a>
                <ul>
                    <li><a href="www.tech.com">Home2</a></li>
                    <li><a href="www.tech.com">Home3</a></li>
                    <li><a href="www.tech.com">Home4</a></li>
                    <li><a href="www.tmech.co">Home5</a></li>
                </ul>
            </li>
            <li><a href="www.tech.com">about us</a>
                <ul>
                <li><a href="www.tech.com">About2</a></li>
                <li><a href="www.tech.com">About3</a></li>
                <li><a href="www.tech.com">About4</a></li>
                <li><a href="www.tmech.co">About5</a></li>
                </ul>
            </li>
            <li><a href="www.tech.com">services</a></li>
            <li><a href="www.tech.com">careers</a></li>
            <li><a href="www.tmech.co">contacts</a></li>
        </ul>   
    </div>
    </body>
</html>

CSS代码：

#nav ul,#nav ul ul
{
    padding:0;
    margin:0;
}
#nav ul li,#nav ul ul  li
{
    list-style-type:none;
    display:inline-block;
}
#nav ul li a
{
    font-size:18px;
    text-transform:uppercase;
    text-decoration:none;
    color:white;
    background:black;
    padding:5px;
    display:inline-block;
}
#nav ul ul li a
{
    font-size:18px;
    text-transform:uppercase;
    text-decoration:none;
    color:white;
    background-image:url('bg.jpg');
    padding:5px;
    display:inline-block;
}
#nav ul li
{
    position:relative;
}
#nav ul li a:hover
{
    background:grey;
}
#nav ul ul li
{
    display:none;
    position:absolute;
    top:30px;
    left:0px;
    width:400px;
}
#nav ul ul li a
{
    padding:15px;
}
#nav ul li:hover ul  li
{
    display:block;
}

Answer 1

您只能看到最后一个子菜单项，因为它们都因position:absolute规则而显示在同一位置。您应该将position:absolute与整个子菜单一起使用，而不是每个项目。

Answer 2

＆＃13;

ul {
    margin:0;
    padding:0;
    list-style-type: none;            
}
ul > li {
    display:inline-block;
    height:20px;
    position:relative;
}
ul > li > ul {
    position: absolute; top:20px;
    display: none;   
}
ul > li:hover > ul {
    display: block;  
}

＆＃13;

<ul>
    <li><a href="#">Home</a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>     
    </li>
     <li><a href="#">About</a>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Services</a></li>
        </ul>
    </li>       
</ul>

＆＃13;

在通过主菜单悬停时，仅显示我的最后一个子菜单，并且不显示剩余的前三个子菜单

2 个答案: