CSS:

ul{

padding: 0;

list-style: none;

margin-top: 0px;

}

ul li{

float: left;

text-align: center;

line-height: 56px;

}

ul li a{

display: block;

color: #333;

background: #2A2A2A;

text-decoration: none;

height:56px;

padding-right: 15px;

padding-left: 15px;

}

ul li a:hover{

color: #fff;

background: #191919;

}

ul li ul{

display: none;

}

ul li:hover ul{

display: block;

width:50px;

}

HTML:

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Gallery</a></li>

<li>

<a href="#">Social</a>

<ul>

<li><a href="#">Facebook</a></li>

<li><a href="#">Twitter</a></li>

<li><a href="#">YouTube</a></li>

<li><a href="#">Behance</a></li>

</ul>

</li>

</ul>

 

The dropdown buttons isn't the same size and i need the home buttons to remain blue(00add3) all the time. Anyone able to help?

Thanks

Try adding this to the CSS

 

ul li ul li {

width: 100px;

}

and remove the width from the ul li:hover ul