由於懸停時沒有出現下拉菜單，因此出現了問題（只是html-css模板）

Question

我在為簡單的下拉菜單編寫代碼時遇到了麻煩，但是無法理解我做錯了什么，仍然是編碼的新手。 每當我將光標移到相應的下拉li標簽上時，就會出現懸停顏色效果，但是沒有下降。 在先前的嘗試中，當代碼稍有不同時，列表id出現了，但是它以內inline方式出現，並且水平對齊而不是垂直對齊。

 #navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; overflow: hidden; } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } a:hover { background-color: #d3d3d3; color: black; } ul li ul li { display: none; } ul li:hover ul li { display block; } #searchbar { margin: 5px 5px 0px 0px; float: right; } 

 <div id="navbar"> <div> <ul id="nav"> <li id="main"><a href="#">Home</a></li> <li id="main"><a href="#">Products</a></li> <li id="main"><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li id="main"><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div> 

Answer 1

首先，將id="main"應用於多個元素。 id是唯一的，並且僅應用於一個元素。

其次，您的hover效果還有些不完整。 請在下面查看我的更改。

 #navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; /*overflow: hidden; don't do this if you want dropdowns */ } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } #nav>li>a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } #nav>li>a:hover { background-color: #d3d3d3; color: black; } #nav>li { position: relative; display: inline-block; } #nav>li ul { display: none; position: absolute; } #nav>li:hover ul { display: block; bottom: -80px; padding: 10px; left: 0; min-width: 100px; } #searchbar { margin: 5px 5px 0px 0px; float: right; } 

 <div id="navbar"> <div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div> 

Answer 2

您需要定位要顯示和隱藏的ul li ul ，並且#main id不能在同一頁面上重復。

 #navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; overflow: hidden; } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } a:hover { background-color: #d3d3d3; color: black; } ul li{display: inherit;} ul li ul { display: none; width: auto; position: absolute; top: 35px; background: #ccc; margin: 0; padding: 0; } ul li ul li{display:block; list-style-type:none} ul li:hover ul { display: block; z-index:1000; } #searchbar { margin: 5px 5px 0px 0px; float: right; } 

 <div id="navbar"> <div> <ul id="nav"> <li class="nestedchild"><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li id="main"><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div> 

Answer 3

您的CSS應該是這樣的。

.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }

.menu {
  background-color:red; 
 }

.bottom-line {
  border-bottom:5px solid pink; 
 }



 #navbar{

background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;


}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
 #main{
  display: inline;
 }
 a{
   display: block;
  text-align: center;
  float: left;
  width: 100px;
  padding: 3px;
  line-height: 25px;
  text-decoration: none;
  color: white;
 margin-top: 0px;
  }
  a:hover{
   background-color: #d3d3d3;
   color: black;
   }

  ul li {
  float: left;
  position: relative;
    }   

 ul li ul {
   display: none;
   position: absolute;
   list-style: none;
  top: 32px;
   z-index: 5;
    background-color: #ddd;
  padding-left: 0;
  } 
  ul li:hover ul {
   display: block;
  }

#searchbar {
   margin: 5px 5px 0px 0px;
  float: right;
 }

你也可以在這里看到演示