기존 탐색 메뉴에 드롭 다운 메뉴 추가

Question

추가 탐색 기능을 추가해야하는 기존 HTML 메뉴가 있습니다. 나는 <ul>과 <li> 태그를 추가했다. 올바른 위치에 있다고 나는 믿는다. 나는 또한 약간 CSS가있다 그러나 ti는 nav 막대기에 연결을 위로 망칠 것을 나타난다. 여기

은 현재의 모습의 이미지입니다 :

http://gyazo.com/b45d1a07de57e617715b74ced91b942b

이것은 내가 드롭 다운 메뉴의 코드를 추가하기 전에 같은 무엇을 :

http://gyazo.com/d3dcd6b866187a650f83842beeb0be0d

HTML

<!--TOP NAV BAR SECTION--> 

<div id="nav_bar">           

<ul> 

<li><a href="index.html">HOME</a></li>&nbsp;&nbsp; 
<li><a href="status.html">STATUS</a></li>&nbsp;&nbsp; 
<li><a href="info.html">INFO</a></li>&nbsp;&nbsp; 
<li><a href="#">GAMEMODES</a>&nbsp;&nbsp; 

<ul> 

<li><a href="#">GAMEMODE - SURVIVAL</a></li> 
<li><a href="#">GAMEMODE - PURE-PVP</a></li> `enter code here` 
<li><a href="#">GAMEMODE - GAMESWORLD</a></li> 
</ul> 
</li> 

<li><a href="rules.html">RULES</a></li>&nbsp;&nbsp; 
<li><a href="vote.html">VOTE</a></li>&nbsp;&nbsp; 

</ul> 

</div> 

내가 완전히 모든 &nbsp 년대를 제거하여 #nav_bar에 적용뿐만 아니라 당신의 HTML 구조를 정리 한 스타일을 제외하고 당신의 CSS를 제거했다

#nav_bar { 
     background-color:#a22b2f; 
     padding-top:10px; 
     height:35px; 
     box-shadow: 0px 2px 10px; 
     } 

#nav_bar ul { 
      margin:-15px; 
      margin-left:110px;    
      } 

#nav_bar ul li { 
       display:inline;    
       } 

#nav_bar ul li ul { 
        opacity:0; 
        } 

#nav_bar ul li:hover ul { 
         opacity:1;       
         } 

#nav_bar a:link { 
       text-decoration: none; 
       } 

#nav_bar a:visited { 
       color:#ffffff; 
       } 

#nav_bar a:hover { 
       background:#8c1b1f; 
       padding-bottom:12px; 
       padding-top:16px; 
       padding-left:10px; 
       padding-right:10px;        
       } 

Answer 1

CSS.

#nav_bar { 
 
    background-color: #a22b2f; 
 
    padding: 10px; 
 
    box-shadow: 0px 2px 10px; 
 
} 
 
#nav_bar ul { 
 
    text-align: center; 
 
    padding-left: 0px; 
 
} 
 
#nav_bar ul li { 
 
    display: inline-block; 
 
} 
 
#nav_bar ul li a { 
 
    color: white; 
 
    font-family: Arial; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    padding: 15px; 
 
} 
 
#nav_bar ul li ul { 
 
    display: none; 
 
} 
 
#nav_bar ul li:hover ul { 
 
    display: block; 
 
    position: absolute; 
 
    padding: 0px; 
 
    background: white; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
} 
 
#nav_bar ul li:hover ul li { 
 
    display: block; 
 
} 
 
#nav_bar ul li:hover ul li a { 
 
    color: black; 
 
}

<div id="nav_bar"> 
 
    <ul> 
 
    <li><a href="index.html">HOME</a> 
 

 
    </li> 
 
    <li><a href="status.html">STATUS</a> 
 

 
    </li> 
 
    <li><a href="info.html">INFO</a> 
 

 
    </li> 
 
    <li><a href="#">GAMEMODES</a> 
 

 
     <ul> 
 
     <li><a href="#">GAMEMODE - SURVIVAL</a> 
 

 
     </li> 
 
     <li><a href="#">GAMEMODE - PURE-PVP</a> 
 

 
     </li> 
 
     <li><a href="#">GAMEMODE - GAMESWORLD</a> 
 

 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="rules.html">RULES</a> 
 

 
    </li> 
 
    <li><a href="vote.html">VOTE</a> 
 

 
    </li> 
 
    </ul> 
 
</div>

당신은 당신의 요구에 따라 그것을 더 스타일 수 있습니다.