What am I overlooking in my HTML and CSS coding to create a standard list dropdown in my navigation menu?
When I preview this section of the page in Chrome and IE, the navigation area appears fine until I hover over the Fishing and Guides link. Instead of displaying the main sections along with different subsections under a specific subject, it hides the other selections.
Is it necessary to include jQuery for this functionality to work properly?
#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><a href="index.html"> Home</a>
</li>
<li>
<a href="fishing.html"> Fishing & Guides<img src="Images/bearpawwhitenav.png"/></a>
<ul>
<li><a href="fishing_tips.html">Fishing Tips</a>
</li>
</ul>
</li>
<li>
<a href="accommodations.html"> Accommodations</a>
</li>
<li>
<a href="area.html"> Area & History</a>
</li>
<li>
<a href="rates.html"> Rates</a>
</li>
<li>
<a href="contact.html"> Contact</a>
</li>
</ul>
</div>