我该如何让导航栏掉落？

我正在尝试为我的网站制作一个下拉菜单（http://www.imsev.com），我无法弄清楚如何让我的菜单在CSS内下拉。导航栏的JSFiddle。我该如何让导航栏掉落？

这是我的HTML导航栏。

<div style="background-color:#FFF; z-index:5; height:auto; width:auto;"> 
<div id="header"> 
      <a href="index.html"><img id="nav_img" src="graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/></a> 
     <div id="nav_bar" style:"color:#FFF;"> 
      <header id="title">Lanier Canoe and Kayak Club</header> 
      <nav> 
      <ul id="nav_words"> 
      <a href="#" id="menu_item"><li class="selected items">Home</li></a> 
      <a href="#" id="menu_item"><li class="items">About Us</li></a> 
        <ul> 
         <li><a href="#">Board Of Directors</a></li> 
         <li><a href="#">Coaches and Staff</a></li> 
         <li><a href="#">Sponsors</a></li> 
        <li><a href="#">Contact Us</a></li> 
        </ul> 
      <a href="#" id="menu_item"><li class="items">Events</li></a> 
        <ul> 
         <li><a href="#">Polar Bear Swim</a></li> 
         <li><a href="#">Lula Bridge Race</a></li> 
         <li><a href="#">Southeast Paddle Sport - Kayak Trader Challenge</a></li> 
        <li><a href="#">USACK Collegiate Nationals & Spring Sprints</a></li> 
        <li><a href="#">Paddlethon and Cardboard Boat Race</a></li> 
        <li><a href="#">Gainesville-Hall Dragon Boat Challenge</a></li> 
        <li><a href="#">Southern Invitational Regatta</a></li> 
        <li><a href="#">USACK Sprint National Championschip</a></li> 
        <li><a href="#">Halloween Howl</a></li> 
        </ul> 
      <a href="#" id="menu_item"><li class="items">Programs</li></a> 
        <ul> 
         <li><a href="#">Recreational Membership</a></li> 
         <li><a href="#">Summer Camp</a></li> 
         <li><a href="#">BBI Jr. Olympic Program</a></li> 
        <li><a href="#">Six Weeks to Nationals</a></li> 
        <li><a href="#">Adult Learn to Kayak</a></li> 
        <li><a href="#">Rentals</a></li> 
        <li><a href="#">Moonlight Paddles</a></li> 
        <li><a href="#">Dragon Boat</a></li> 
        <li><a href="#">Competitive Programs (Kids and Adults)</a></li> 
        </ul> 
      <a href="#" id="menu_item"><li class="items login">Log In</li></a> 
      </ul> 
      </nav> 
     </div> 
</div>

这里是Active CSS

#title { 
    float: left; 
    vertical-align: middle; 
    padding-top: 13px; 
    margin-top: 0px; 
    left: 0px; 
    padding-left: 136px; 
    font-size: 25px; 
    font-family: 'Carrois Gothic', sans-serif; 
} 

#header_img{ 
    border: none; 
    margin: 0 auto; 
    display: block; 
    z-index: -10; 
    position: relative; 
    top: 1px; 
} 
#header { 
    width: 100%; 
    height: 150px; 
    padding-bottom:20px; 
    color:white; 
    position:static; 
} 
#nav_bar { 
    height: 56.088px; 
    width: 88%; 
    background-color: #629B5D; 
    z-index: 2; 
    position: absolute; 
    left: 120px; 
    border-top: 68px solid white;  /* Added. */ 
    top: 0;       /* Added. */ 
} 
#nav_img { 
    z-index: 3; 
    position: absolute; 
    top: 15px; 
    left: 37px; 
} 

#nav_words { 
    display: inline; 
    padding-top: 0px; 
    float: right; 
    padding-left: 0px; 
    padding-right: 0px; 
    margin-right: 0px; 
    margin-left: 0px; 
    vertical-align: middle; 
    margin-top: 15px; 
} 

#nav_words a { 
    text-decoration:none; 
} 

.items { 
    display: inline; 
    padding-top:5px; 
    vertical-align: middle; 
    margin-right: 25px; 
    font-family: 'Carrois Gothic', sans-serif; 
    list-style-type:none; 
} 

#nav_words a { 
    color: #FFF; 
    background-color: #629B5D; 
    font-size:18px; 
} 

#menu_item :hover { 
    color: #D4D4D4; 
    opacity: 75%; 
} 

.login { 
    border: solid 1px; 
    border-radius: 50px; 
    padding: 4px; 
    background-color:#7DC476; 
    border-color:#7DC476; 
} 

.login :hover { 
    background-color: #7DC476; 
    border-color: #9FD39A; 
} 



.selected { 
    border: solid 1px #92CD8D; 
    background-color: #92CD8D; 
    padding: 18px 5px; 
    margin-right:10px; 
} 
`

来源

2014-04-02 enoughsev

您的HTML无效：'li'必须是'ul'的直接后件，不包含在'a'标签中。这不会解决您的问题，但应该解决不管。 –

你的问题不清楚。你只是问如何做一个有效的下拉菜单？在网上找到教程不应该很难，因为这是很常见的事情。当你将鼠标悬停在它上面或点击时，你希望它下降吗？（点击会更好的触摸屏）。 – Moss

如果你打算将它用于多个元素，'menu-item'应该是'class'，而不是'id'。页面上只有一个元素应该有唯一的'id'。如果您需要区分多个元素，请使用'class'，就像您对'items'所做的一样。 –

有你的HTML错误。不要使用ID来引用具有相同ID的多个项目;改用类。

来源

2014-04-02 03:13:32 Marcatectura

我认为这是一条评论而不是答案。 –

我该如何让导航栏掉落？

回答

相关问题