Jump to content

CSS Dropdown menu shifting


imperialized

Recommended Posts

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.