Help with a full width drop down navigation / menu bar

[emabevington]

Hello there,

I am building a website for a client and having a little trouble with adding drop down to a full width navigation bar.

This is the site so far: http://practice.bevidesigns.co.uk/
And this is what I want my drop down menu to look like: http://i49.tinypic.com/ajnqq9.jpg

The reason I am having problems is because it is a full width menu I can’t seem to figure it out.

This is my current code:

#nav {

width: 100%;

float: left;

margin: 0 0 1em 0;

padding-left: 200px;

background-color: #003471;

border-bottom: 0px solid #ccc;  }

#nav ul {

list-style: none;

width: 800px;

margin: 0 auto;

padding: 0; }

#nav li {

float: left; }

#nav li a {

display: block;

height:20px;

padding: 15px 20px;

text-decoration: none;

font-weight: bold;

color: #fff;

border-right: 0px solid #ccc; }

#nav li:first-child a {

border-left: 0px solid #ccc; }

#nav li a:hover {

color: #fff;

background-color: #3399cc; }

Thanks
-Emma

[timmey]

first your css

#nav {

width: 100%;

float: left;

margin: 0 0 1em 0;

background-color: #003471;

border-bottom: 0px solid #ccc;  }

lets the x-scrollbar appear. because the padding is added to 100%.
delete padding-left from #nav and add it to your image or image-container. something like this

#nav > img {padding-left: 200px;}

and your menu:
you can add a secound ul into your menu, something like this

BUYERS GUIDE



BUYERS GUIDE

BUYERS GUIDE

BUYERS GUIDE

BUYERS GUIDE

and style it with

#nav li ul {display: none;}

#nav li ul li {display: inline-block;width: 100%;}

#nav li:hover ul{display: block;position: absolute;width: 200px;}

that is just a starting point, maybe it can help you

[emabevington]

It works a treat, brilliant thank you!

Here’s how it looks now: http://practice.bevidesigns.co.uk/

Thanks again :)

[Author]

Posts