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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.