无法在HTML中创建下拉菜单

debugcn 发表于 Dev

舞蹈

我正在用HTML编写一个简单的下拉菜单代码。我无法创建下拉菜单。我正在使用谷歌浏览器。每一件事似乎显示精细唯一下降的相关下降Home3是home3.1没有显示出来。请帮忙！

<html>
<head>
  <title>Welcome to I</title>
  <link rel="stylesheet" href="n.css">
</head>
<body>
    <div id ="nav">
        <div id = "nav_wrapper">
            <ul>
                <li><a href="#">Home</a></li><li>
                <a href="#">Home1</a></li><li>
                <a href="#">Home2</a></li><li>
                <a href="#">Home3</a>       
                    <ul>
                        <li><a href="#">Home3.1</a></li>
                    </ul>

                </li>
            </ul>
        </div>
    </div>
</body>

</html>

///////////////////////////////// css文件

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

#nav
{
    background-color: #222;
}
#nav_wrapper
{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li
{
    display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}

#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
display: none;
position : absolute;
}

吉尔达斯·坦博

您需要添加position: relative到#nav ul li并设置孩子UL100%从顶部，然后给它在这种情况下，相同导航背景色。

然后给孩子ul绝对的位置

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

#nav
{
    background-color: #222;
}
#nav_wrapper
{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li
{
    display: inline-block;
    position: relative; /*add this*/
}
#nav ul li:hover{
background-color: #333;
}

#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover >ul{
display: block;
background: #222;
}
#nav ul ul{
display: none;
position : absolute;
top: 100%;
left: 0
}

<html>
<head>
  <title>Welcome to I</title>
  <link rel="stylesheet" href="C:\Users\lenovo\Desktop\Spring Semester\IP\Lab02\test\n.css">
</head>
<body>
    <div id ="nav">
        <div id = "nav_wrapper">
            <ul>
                <li><a href="#">Home</a></li><li>
                <a href="#">Home1</a></li><li>
                <a href="#">Home2</a></li><li>
                <a href="#">Home3</a>       
                    <ul>
                        <li><a href="#">Home3.1</a></li>
                    </ul>

                </li>
            </ul>
        </div>
    </div>
</body>

</html>