由于悬停时没有出现下拉菜单，因此出现了问题（只是html-css模板）

Question

I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was aa little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.

 #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

First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.

Second, your hover effect was just a little incomplete. See my changes below.

 #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

you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below

 #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

Your css should be like that.

.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;
 }

and You can also see demo here