Question

我正在用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;
}

Answer 1

尝试以下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
{
    color: #ccc;
    display: block;
    padding : 15px;
    text-decoration: none;
}

#nav ui li a:hover{
    color: #ccc;
text-decoration: none;
}
#nav ul ul{
    display: none;
    position : absolute;
}
#nav ul ul li a{
    background: #333;
    color: #fff;
}
#nav ul li:hover ul{
    display: block;
}

<强> JSFIDDLE DEMO

<强> MUTLI-LEVEL MENU

<强> MULTI-LEVEL MENU WITH HOVER EFFECT

Answer 2

您需要将position: relative添加到#nav ul li并从顶部设置子ul 100%，然后在此情况下为其提供背景颜色与导航相同。

然后给孩子ul一个绝对位置

＆＃13;

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
}

＆＃13;

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

＆＃13;

无法在HTML中创建下拉列表

2 个答案: