Html 在主菜单中悬停时，仅显示我的最后一个子菜单，其余前三个子菜单不显示_Html_Css

Html 在主菜单中悬停时，仅显示我的最后一个子菜单，其余前三个子菜单不显示

html css

Html 在主菜单中悬停时，仅显示我的最后一个子菜单，其余前三个子菜单不显示,html,css,Html,Css,HTML代码： <html> <head> <link rel="stylesheet" type="text/css" href="menu3.css"> <title>Menu Bar</title> </head> <body> <div id="nav"> <ul id="menu">

HTML代码：

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

您只能看到最后一个子菜单项，因为根据

位置：绝对规则，它们都显示在同一位置。
您应该对整个子菜单ul而不是每个li项使用position:absolute
。
ul{
保证金：0；
填充：0；
列表样式类型：无；
}
ul>li{
显示：内联块；
高度：20px；
位置：相对位置；
}
ul>li>ul{
位置：绝对；顶部：20px；
显示：无；
}
ul>li：悬停>ul{
显示：块；
}



























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