css dropdown menu shifts website

Question

I have a dropdown menu on my website, and its acting buggy, the dropdown works, but it shifts my whole website when its hovered over.

code pen http://codepen.io/anon/pen/uaFDj

#nav {
}
#nav {
    background: none repeat scroll 0 0 #585858;
    border-radius: 3px;
    height: 50px;
    margin-bottom: 10px;
    padding: 0;
}

#searchbar input[type=text] { 

    background: none repeat scroll 0 0 #fff;
    border: 1px solid black;
    height: 25px;
    padding: 1px 1px 1px 5px;
    width: 230px;


}

#searchbar input[type="submit"] {
    background: none repeat scroll 0 0 #1abc9c;
    border: 1px solid #12ab8d;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 15px;
}

#searchbar { margin-right:10px; }



#nav ul {
    list-style: none outside none;
    margin: 0;
padding: 0 0 0 10px;
}

#nav ul li {
line-height:50px;
float:left;
}

#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}


#nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    #nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        #nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            #nav ul ul li a:hover {
                background: #4b545f;
            }


#nav ul li a:hover {
background-color:#333;
}

#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}

li.active {
    float: right !important;
}
li.active_messages {
    float: right;
}
#nav ul>li:hover>ul {
  top:initial;
}

my html

<div id="nav"> 

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="categories.php">Categories</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>

<li><a href="about.php">About us</a></li>
<li><a href="my_profile.php">Profile</a></li>
<li><a href="my_parts.php">My Listings</a></li>
<li><a href="verification.php">Get Verified!</a></li>
<li><a href="logout.php">Log out</a></li>
<li class="active">
<div id="searchbar">  
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>

</div>

it only bugs when its in full screen without ay sidebar stroller. thanks for the upcoming help.

Thank you for the upcoming help and support from everyone.

Answer 1

DEMO

why are you giving top:100%;

  #nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; display:none;
    }

    #nav ul>li:hover>ul {
      display:block;
    }

UPDATE : to keep a highlighted DEMO

#nav ul li:hover > a{
background-color:#333;
}

Answer 2

Give max width for #nav and width 100%

#nav{
    background: none repeat scroll 0 0 #585858;
    border-radius: 3px;
    height: 50px;
    margin-bottom: 10px;
    max-width: 858px;
    padding: 0;
    width: 100%;
}

so that it won't move anymore.

Answer 3

Without even looking at your code I can tell you why. The width of the dropdown is moving some margin to the right causing the search bar and probably anything else underneath the dropdown to move right.

Just make a <ul> list-style-type: none; with <li> display: inline or block;

Also you're not setting a width to anything but the search bar, which might be another cause. Try setting a width to your nav.

Answer 4

Hey now just define some css as like this

    #nav ul li {
    position:relative;
    }

#nav ul > li ul{
  display:none;
}
#nav ul li:hover ul{
  display:block;
}