Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but I'm curious if there's a way to achieve this without using JavaScript.
Here is the HTML code:
<div class="navWrapper">
<div class="left"></div>
<div class="nav">
<ul>
<li class="home"><a href="/">Home</a></li>
<li class="spacer"></li>
<li class="about">
<a href="about_us/">About Us</a>
<ul class="sub">
<li><a href="">option 1</a></li>
</ul>
</li>
<!-- About Ends -->
<li class="spacer"></li>
<li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
<li class="spacer"></li>
<li class="services">
<a href="services/">Services</a>
<ul class="sub">
<li><a href="">option 1</a></li>
<li><a href="">option 2</a></li>
</ul>
<!-- Sub Ends -->
</li>
<!-- Services Ends -->
<li class="spacer"></li>
<li class="testimonials"><a href="testimonials/">Testimonials</a></li>
<li class="spacer"></li>
<li class="more">
<a href="javascript:void(0);">More Information</a>
<ul class="sub">
<li><a href="">option 1</a></li>
<li><a href="">option 2</a></li>
</ul>
<!-- Sub Ends -->
</li>
<li class="spacer"></li>
<li class="contact"><a href="contact-us/">Contact Us</a></li>
</ul>
<div class="contentClear"></div>
</div>
<!-- Nav Ends -->
<div class="right"></div>
</div>
<!-- Nav Wrapper Ends -->
The corresponding CSS:
#header .navWrapper {
width: 1004px;
}
... (CSS styles here)
#header .navWrapper .right {
float: right;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-right-bg.png') left top no-repeat;
}