navbar에 대한 CSS 드롭 다운 메뉴 추가

Question

내 메뉴의 드롭 다운 메뉴를 추가하려고하는데 그 위에 마우스를 가져 가면 표시되지 않는 것 같습니다. 다가올 지원에 감사드립니다. http://jsfiddle.net/nbh2e15y/2/

는 CSS :

#nav { 
    background: none repeat scroll 0 0 #585858; 
    border-radius: 3px; 
    height: 50px; 
    margin-bottom: 10px; 
    padding: 0; 
} 

#searchbar input[type=text] { 

    background: none repeat scroll 0 0 #fff; 
    border: 1px solid black; 
    height: 25px; 
    padding: 1px 1px 1px 5px; 
    width: 230px; 


} 

#searchbar input[type="submit"] { 
    background: none repeat scroll 0 0 #1abc9c; 
    border: 1px solid #12ab8d; 
    color: white; 
    cursor: pointer; 
    font-size: 14px; 
    padding: 4px 15px; 
} 

#searchbar { margin-right:10px; } 



#nav ul { 
    list-style: none outside none; 
    margin: 0; 
padding: 0 0 0 10px; 
} 

#nav ul li { 
line-height:50px; 
float:left; 
} 

#nav ul li a { 
line-height:50px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:400; 
text-decoration:none; 
color:#FFF; 
background-color:none repeat scroll 0 0 #585858; 
display:block; 
padding:0 20px; 
} 


#nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
    #nav ul ul li { 
     float: none; 
     border-top: 1px solid #6b727c; 
     border-bottom: 1px solid #575f6a; 
     position: relative; 
    } 
     #nav ul ul li a { 
      padding: 15px 40px; 
      color: #fff; 
     } 
      #nav ul ul li a:hover { 
       background: #4b545f; 
      } 


#nav ul li a:hover { 
background-color:#333; 
} 

#nav ul li a.active { 
background-color:#333; 
} 
#nav ul li active { 
background-color:red; 
} 

li.active { 
    float: right !important; 
} 
li.active_messages { 
    float: right; 
} 

와 HTML 코드 :

<div id="nav"> 

<ul> 
<li><a href="index.php">Home</a></li> 
<li><a href="categories.php">Categories</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a></li> 
      </ul> 
     </li> 

<li><a href="about.php">About us</a></li> 
<li><a href="my_profile.php">Profile</a></li> 
<li><a href="my_parts.php">My Listings</a></li> 
<li><a href="verification.php">Get Verified!</a></li> 
<li><a href="logout.php">Log out</a></li> 
<li class="active"> 
<div id="searchbar"> 
<form action="search.php" method="get"> 
<input type="text" hidden="" value="product/search" name="route"> 
<input type="text" required="" placeholder="Search..." name="search"> 
<input type="submit" value="Search"> 
</form> 
</div></li> 
</ul> 

</div> 

Answer 1

당신이

#nav ul>li:hover>ul { 
    top:initial; 
} 

를 추가하는 경우

이것은 jfiddle 내 코드입니다 너의 CSS이면 li에 마우스를 올리면 ul이 원래보기로 복원되므로 드롭 다운이 '표시'됩니다.

이렇게하면 약간의 변화가 있음을 알 수 있습니다. 귀하의 CSS는 가독성을 위해 약간의 개선이 필요하지만, 이러한 변화는 페이지의 흐름에서 벗어나는 것이 아니기 때문에 발생합니다.하지만 그것은 또 다른 질문입니다.

Answer 2

이 시도 ....

CSS 코드 :

는

#nav { 
background: none repeat scroll 0 0 #585858; 
border-radius: 3px; 
height: 50px; 
margin-bottom: 10px; 
padding: 0; 
} 

#searchbar input[type=text] { 
background: none repeat scroll 0 0 #fff; 
border: 1px solid black; 
height: 25px; 
padding: 1px 1px 1px 5px; 
width: 230px; 
} 
#searchbar input[type="submit"] { 
background: none repeat scroll 0 0 #1abc9c; 
border: 1px solid #12ab8d; 
color: white; 
cursor: pointer; 
font-size: 14px; 
padding: 4px 15px; 
} 
#searchbar { margin-right:10px; } 

#nav ul { 
list-style: none outside none; 
margin: 0; 
padding: 0 0 0 10px; 
} 
#nav ul li { 
line-height:50px; 
float:left; 
} 
#nav ul li a { 
line-height:50px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:400; 
text-decoration:none; 
color:#FFF; 
background-color:none repeat scroll 0 0 #585858; 
display:block; 
padding:0 20px; 
} 
#nav ul ul { 
background: #5f6975; 
border-radius: 0px; 
padding: 0; 
display:none; 
position: absolute; 
} 
#nav ul li:hover ul{ 
display:block; 
position:absolute; 
} 
#nav ul ul li a { 
color: #fff; 
background: #5f6975; 
} 
#nav ul ul li a:hover { 
background: #4b545f; 
} 
#nav ul li a:hover { 
background-color:#333; 
} 
#nav ul li a.active { 
background-color:#333; 
} 
#nav ul li active { 
background-color:red; 
} 
li.active { 
    float: right !important; 
} 
li.active_messages { 
    float: right; 
}