Question

我正在为我的学术目的设计一个模板。我的导航栏的HTML结构如下所示。

<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="container">
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a href="#">Home</a></li><li>
                    <a href="#">Events</a>
                     <ul>
                        <li><a href="#">Coding</a></li>
                        <li><a href="#">Quiz</a></li>
                    </ul>
                    </li><li>
                    <a href="#">About Us</a></li><li>
                    <a href="#">Contact US</a></li>
                </ul>
            </div>      
        </div>
        <div id="header">
            <h1>My First Website</h1>
        </div>
        <div id="content">aaf
        </div>
        <div id="footer">afaf
        </div>
    </div>
</body>

我写了style.css如下

  body{
    margin: 0px;
    padding: 0px;
    font-size: 18;
}
#nav{
    background-color: black;
    margin: 0 auto;
    text-align: left;
}
#nav_wrapper{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav ul li{
    display: inline-block;
    line-height: 50px;
}
#nav ul ul li{
    display:block; 
    background-color: red;
}
#nav ul ul{
    display: none;
}
#nav ul li :hover ul{
    display: block;
    position: absolute;
}
#nav ul li a{
    text-decoration: none;
    color: white;
    display: block;
    width: 120px;
    text-align: center;
}
#nav ul li :hover{
    background-color: #FF99FF;
    color: black;
}

我的问题是当我将鼠标悬停在事件项目上时，下拉菜单不显示。我需要帮助来解决它。

Answer 1

也许你应该删除li和：hover之间的空格。之后它对我有用。

#nav ul li:hover ul{
  display: block;
  position: absolute;
}

还在这里

#nav ul li:hover{
  background-color: #FF99FF;
  color: black;
}

Answer 2

＆＃13;

 body{
margin: 0px;
padding: 0px;
font-size: 18;
}
#nav{
background-color: black;
margin: 0 auto;
text-align: left;
}
#nav_wrapper{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav ul li{
display: inline-block;
line-height: 50px;
}
#nav ul ul li{
display:block; 
background-color: red;
}
#nav ul ul{
display: none;
}
#nav ul li:hover ul{
display: block;
position: absolute;
}
#nav ul li a{
text-decoration: none;
color: white;
display: block;
width: 120px;
text-align: center;
}
#nav ul li :hover{
background-color: #FF99FF;
color: black;
}

＆＃13;

<div id="container">
    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Home</a></li><li>
                <a href="#">Events</a>
                 <ul>
                    <li><a href="#">Coding</a></li>
                    <li><a href="#">Quiz</a></li>
                </ul>
                </li><li>
                <a href="#">About Us</a></li><li>
                <a href="#">Contact US</a></li>
            </ul>
        </div>      
    </div>
    <div id="header">
        <h1>My First Website</h1>
    </div>
    <div id="content">aaf
    </div>
    <div id="footer">afaf
    </div>
</div>

＆＃13;

Answer 3

请根据您的需要尝试这个：

https://jsfiddle.net/k2va9ngo/

<强> HTML

<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

<强> CSS

 ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}

Answer 4

#nav ul ul{
    display: none;
    position: absolute;
}

#nav ul li:hover ul{
    background-color: #FF99FF;
    color: black;
    display:block;
}

你会看到我在#nav ul ul中添加了一个绝对的位置。我也摆脱了#nav ul li中的空间：悬停并在悬停后添加了ul。然后，您需要设置显示块以显示嵌套的ul。

如果没有将ul ul位置设置为绝对值，那么当您的下拉列表出现时，您的父级ul将被推下。删除它，看看我的意思。

下拉菜单确实如此

4 个答案: