imperialized Posted December 24, 2011 Share Posted December 24, 2011 Hey guys, Im working on my CSS menu for a website I am working on. For some reason I can not figure out why the menu shifts when you hover over. An example can be found here: http://www.imperialized.com/new/index.php You gotta log in to see the dropdown. user: testtest pass: password The CSS for the menu: /** Navigation **/ #navigation { margin-left: 20px; margin-top: 40px; float: left; } #navigation ul{ list-style: none; margin-left: 20px; } #navigation li{ display: inline-block; width: 125px; height: 30px; padding-top: 10px; text-align: center; background: #27343C; border-radius: 5px; } #navigation li:hover{ background: #6699dd; } #navigation li.active{ background: #FC4F83; } #navigation a{ color: #FFFFFF; font: bold; text-decoration: none; } #navigation a:hover{ color: #FFFFFF; text-decoration: underline; } #navigation p{ font-size: 30pt; font-weight: bold; color: #FC4F83; margin-left: 120px; } #navigation li ul{ display: none; } #navigation li ul li a{ height: 12px; font: 8pt; text-decoration: none; } #navigation li ul li a:hover{ height: 12px; font: 8pt; text-decoration: underline; } #navigation li ul li:hover{ background: #FC4F83; } #navigation li:hover > ul { display: block; } The navigation code is as follows includes this: print "<ul> <li class='active'><a href='#'>Home</a></li> <li><a href='#'>Profile</a></li> <li><a href='#'>Gallery</a></li>"; if(isset($_COOKIE['username'])){ //They are logged in, display user menu print "<li><a href=#>$username ∇ </a> <ul> <li><a href=#>Sub Menu</a></li> <li><a href=#>Sub Menu</a></li> <li><a href=#>Sub Menu</a></li> </ul> </li>"; print "</ul>"; } ?> I've played around with relative and absolute positioning, but I am not having any luck. Can someone point me in the right direction? Perhaps a more efficient way of doing this? Link to comment https://forums.phpfreaks.com/topic/253792-css-dropdown-menu-shifting/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.