Jump to content

Submenu Position Problem


Recommended Posts

div#menu {margin: 0;width: inherit;height: 40px;background-color: #FF99CC;} div#menu ul {margin: 0;padding: 0;line-height: 40px;}div#menu li {margin: 0;padding: 0;list-style: none;float: right;position: relative;} div#menu ul li a {text-align: center;height: 40px;width: 200px;display: block;color: #FFFFFF;text-decoration: none;text-shadow: 1px 1px 1px #000;}  div#menu li:hover {background: #FFFF66;} div#menu ul li a:hover {color: #FF0099} div#menu ul ul {visibility: hidden;}div#menu ul li:hover ul {visibility: visible;z-index: 9999;} div#menu li li {display: inline-block;}

<div id="menu"><ul>  <li><a href="">English Activities</a>		 <ul>			 <li><a href="">English Activities</a></li>			 <li><a href="">English Activities</a></li>			 <li><a href="">English Activities</a></li>		    </ul>	    </li>	 <li><a href="">Students' Works</a></li>  <li><a href="">Teachers' Development</a></li>  <li><a href="">About Us</a></li></ul></div>

When I insert the submenu (second ul), the first ul (menu) which was floated right is now floated left. How can I fix this?

Link to comment
Share on other sites

I think you are missing a position: absolute; for the submenu ul

div#menu ul ul {visibility: hidden;position:absolute;} div#menu ul li:hover ul {visibility: visible;z-index: 9999;} 

using position: absolute; causes all submenu to be taken out of the flow, and occupy no space, which prevents the submenu pushing the parent menu left; z-index: 9999; won't work without the use of position: declaration.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...