How would I make this Navigation Bar Drop Down? - html

Question

I am Trying to make a drop down menu for my website ( http://www.imsev.com ) and I cannot figure out how to get my menu to drop down inside the CSS. JSFiddle of the navigation bar.
Here is my HTML for the Navigation Bar.
<div style="background-color:#FFF; z-index:5; height:auto; width:auto;">
<div id="header">
<img id="nav_img" src="graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<nav>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<ul>
<li>Board Of Directors</li>
<li>Coaches and Staff</li>
<li>Sponsors</li>
<li>Contact Us</li>
</ul>
<li class="items">Events</li>
<ul>
<li>Polar Bear Swim</li>
<li>Lula Bridge Race</li>
<li>Southeast Paddle Sport - Kayak Trader Challenge</li>
<li>USACK Collegiate Nationals & Spring Sprints</li>
<li>Paddlethon and Cardboard Boat Race</li>
<li>Gainesville-Hall Dragon Boat Challenge</li>
<li>Southern Invitational Regatta</li>
<li>USACK Sprint National Championschip</li>
<li>Halloween Howl</li>
</ul>
<li class="items">Programs</li>
<ul>
<li>Recreational Membership</li>
<li>Summer Camp</li>
<li>BBI Jr. Olympic Program</li>
<li>Six Weeks to Nationals</li>
<li>Adult Learn to Kayak</li>
<li>Rentals</li>
<li>Moonlight Paddles</li>
<li>Dragon Boat</li>
<li>Competitive Programs (Kids and Adults)</li>
</ul>
<li class="items login">Log In</li>
</ul>
</nav>
</div>
</div>
Here is the 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;
}
`

Answer 1

There's an error in your HTML. Do not use IDs to refer to multiple items with the same ID; use classes instead.