What am I missing in making a dropdown nav? - html

Question

As stated above, what am I not seeing in my coding (html and CSS) to make a standard list dropdown in my nav?
When I go to preview this portion of the page in Chrome and IE the nav section looks fine until I hover over my Fishing and Guides link. It hides the other selections when it's supposed to display the main sections along with different subsections within a particular subject.
Do I also need to incorporate jquery to make this work?
#topnav {
background-color: #333333;
clear: both;
border-bottom: 3px #cccccc solid;
overflow: hidden;
}
#topnav ul {
width: 100%;
float: left;
margin: 0px;
background-color: #333333;
position: relative;
}
#topnav ul li {
display: inline
}
#topnav ul li a {
float: left;
padding: 10px 20px;
color: white;
text-decoration: none;
}
#topnav a:visited {
color: #ffffff;
}
#topnav a:active {
color: #ffffff;
}
#topnav a:hover {
color: #ffffff;
background-color: maroon;
}
#topnav a:focus {
color: #ffffff;
}
#topnav ul li img {
vertical-align: middle;
padding-left: 8px;
width: 22px;
height: 18px;
}
#topnav ul li:hover ul {
display: block;
}
#topnav ul ul {
display: none;
position: absolute;
background-color: #333333;
border: 5px #333333 solid;
border-top: 0px;
margin-left: -5px;
min-width: 100px;
}
#topnav ul ul li {
display: block
}
#topnav ul ul li a:visited {
color: #ffffff;
}
#topnav ul ul li a:hover {
color: #ffffff;
background-color: maroon;
}
#topnav ul ul li a:focus {
color: #ffffff;
}
<div id="topnav">
<ul>
<li> Home
</li>
<li>
Fishing & Guides<img src="Images/bearpawwhitenav.png"/>
<ul>
<li>Fishing Tips
</li>
</ul>
</li>
<li>
Accommodations
</li>
<li>
Area & History
</li>
<li>
Rates
</li>
<li>
Contact
</li>
</ul>
</div>

Answer 1

When you :hover fishing guides you are showing fishing tips. The fishing tips is hiding the rest of your nav, it's sitting ontop. You should position it so it appears below the main nav. Carl is right, bootstrap is great resource for building these types of things.