Question

我在下拉框中遇到了一些麻烦。我希望我的<a>元素没有下划线并位于下拉内容的中间。你可以看到我的代码，我想从下拉内容中删除下划线，我希望它在悬停时变为红色。但是，每当我尝试这样做时，它都会产生错误的缺陷这是代码。测试它以逻辑方式查看问题！

<!DOCTYPE html>
<html>
<head>
<style>
/* Building navigation bar */ 

ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding-bottom: 5px;
	 background-color: black;
	 display: block;
}

li a { 
         text-decoration: none;
		 padding: 14px 20px;
		 color: white;
		
}

li a:hover { 
             background-color: red;
}

li { 
         display: inline;
}

/* Building about dropdown and the dropdown content */ 

.container { 
           width: 15em;
}

.dropdown { 
        position: relative;
		 display: inline-block;
}

.dropdown-content { 
          text-align: center;
          position: absolute;
		  display: none;
		  background-color: black;
		  color: white;
	      
} 

.dropdown:hover .dropdown-content { 
          display: block;
}


</style>
</head>

<body>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="news.html">News</a></li>
	<div class="dropdown">
    <li><a href="#about.html">About</a></li>
	 <div class="dropdown-content"><ul>
	      <a style="text-decoration = none;" href="#theMan.html">Hey</a>
		  <a href="#hahahaha.html">Hey</a>
		  </ul>
	     </div>
	</div>
  </ul>
</body>

</html>

Answer 1

那里有相当数量的无效HTML。 Div不能是ul的孩子。您可能希望首先验证HTML。

因此，稍微重新构建HTML以使其有效。

＆＃13;

ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-bottom: 5px;
  background-color: black;
  display: block;
}
li a {
  text-decoration: none;
  display: block;
  padding: 10px;
  color: white;
}
li a:hover {
  background-color: red;
}
li {
  display: inline-block;
}
/* Building about dropdown and the dropdown content */

.container {
  //width: 15em;

}
.dropdown {
  position: relative;
}
.dropdown-content {
  text-align: center;
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: black;
  color: white;
}
.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<ul>
  <li><a href="home.html">Home</a>
  </li>
  <li><a href="news.html">News</a>
  </li>
  <li class="dropdown"><a href="#about.html">About</a>
    <ul class="dropdown-content">
      <li><a style="text-decoration = none;" href="#theMan.html">Hey</a>
      </li>
      <li><a href="#hahahaha.html">Hey</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

Check My Fiddle

＆＃13;

ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding-bottom: 5px;
	 background-color: black;
	 display: block;
}

li a { 
         text-decoration: none;
		 padding: 14px 20px;
		 color: white;
		
}

li a:hover { 
             background-color: red;
}

li { 
         display: inline;
}

/* Building about dropdown and the dropdown content */ 

.container { 
           width: 15em;
}

.dropdown { 
        position: relative;
		 display: inline-block;
}

.dropdown-content { 
          text-align: center;
          position: absolute;
		  display: none;
		  background-color: black;
		  color: white;
	      
} 

 /*added lines*/
.dropdown-content a{
  text-decoration:none;
}
.dropdown-content a:hover{
  color:red;/*font-color will be red*/
}
/*added lines ends here*/



.dropdown:hover .dropdown-content { 
          display: block;
}

＆＃13;

<body>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="news.html">News</a></li>
	<div class="dropdown">
    <li><a href="#about.html">About</a></li>
	 <div class="dropdown-content"><ul>
	      <a href="#theMan.html">Hey</a>
		  <a href="#hahahaha.html">Hey</a>
		  </ul>
	     </div>
	</div>
  </ul>
</body>

＆＃13;

Answer 3

1。）您必须将子菜单条目放入li标记（它们位于ul标记中！）

2。）.dropdown-content选择器/规则必须更改为.dropdown-content ul

3.）其他一些东西，但这不是问题的一部分。

＆＃13;

ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding-bottom: 5px;
  background-color: black;
  display: block;
}
li a {
  text-decoration: none;
  padding: 14px 20px;
  color: white;
}
li a:hover {
  background-color: red;
}
li {
  display: inline;
}
/* Building about dropdown and the dropdown content */

.container {
  width: 15em;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content ul {
  text-align: center;
  position: absolute;
  display: none;
  background-color: black;
  color: white;
  padding: 0;
}
.dropdown:hover .dropdown-content ul {
  display: block;
}

＆＃13;

<ul>
  <li><a href="home.html">Home</a>
  </li>
  <li><a href="news.html">News</a>
  </li>
  <div class="dropdown">
    <li><a href="#about.html">About</a>
    </li>
    <div class="dropdown-content">
      <ul>
        <li><a style="text-decoration = none;" href="#theMan.html">Hey</a>
        </li>
        <li><a href="#hahahaha.html">Hey</a>
        </li>
      </ul>
    </div>
  </div>
</ul>

＆＃13;

下拉框删除样式

3 个答案: