tinfanide Posted October 11, 2011 Share Posted October 11, 2011 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 More sharing options...
dsonesuk Posted October 11, 2011 Share Posted October 11, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.