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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.