troubleshooting Question

How do I get my dropdown navigation menu to work using CSS?

Avatar of shampouya
shampouya asked on
CSSHTML
2 Comments1 Solution234 ViewsLast Modified:
I have a simple menu in my navigation div at the top of my website, consisting of a <ul> with several <li>s that float left. Then I have a nested set of <ul>s and <li>s that are hidden, that I want to appear when the user hovers over the first set of <li>s. My CSS code below isn't working. It's causing all the buttons and sub-buttons to float left, and nothing is ever hidden. Any idea what is wrong below?


.menuSectionDiv li{float:left; position:relative;}
.menuSectionDiv li ul{position:absolute; display:none; top:35px; left:0;}
.menuSectionDiv li ul li{float: none;}
.menuSectionDiv li:hover ul{display:block;}

<div class="menuSectionDiv">
		<ul>
			<li><a href="#"><span id="homeButton">Home</span></a></li>
			<li><a href="#"><span id="servicesButton">Services</span></a></li>	
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>			
			<li><a href="#"><span id="aboutButton">About</span></a></li>
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>	
			<li><a href="#"><span id="contactButton">Contact</span></a></li>
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>				
		</ul>
</div> 
ASKER CERTIFIED SOLUTION
basicinstinct

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros