我該如何讓導航欄掉落？

我正在嘗試爲我的網站製作一個下拉菜單（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

我認爲這是一條評論而不是答案。 –

我該如何讓導航欄掉落？

回答

相關問題