display background across whole menu bar

Question

I have this CSS for my horizontal menu:

#nav>li {
    float:left
}
#nav li:hover ul {
    position:absolute;
     display:block;
}
#nav {
    margin:20px 0 0 0;
    left:0;
    width: 100%; 
    list-style:none;
}
#nav li a {
    display: inline-block; 
    padding: 8px;
    margin:0;
    background: #666666; 
    border-top: 1px solid #EEEEEE; 
    border-bottom: 1px solid #EEEEEE; 
    text-decoration: none; 
    color: #EEEEEE;
    width:80px;
    border-right:1px solid #F36F25;
}
#nav li a:hover, #nav li a.active {
    background: #F36F25; 
    color: #FFFFFF;
    cursor:pointer;
}
#nav li ul {
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background: #EEEEEE;
    color:#666666;
    border:1px solid #EEEEEE;
    width:145px;
}
#nav li ul li a:hover {
    background: #EEEEEE;
    color:#f36f25;
    border:1px solid #f36f25;
}

I want to add a background colour for 100% width of the page, i tried adding background-color:#666666; to

#nav

but that didnt work, here is a fiddle of the full code: http://jsfiddle.net/39Rdw/

i want the menu to be 100% width of the page

have you found the `80px` you set for `#nav li a` ? – Roko C. Buljan May 15 '14 at 22:08 — Roko C. Buljan, May 15 '14 at 22:08

score 2 · Answer 1 · edited May 23 '17 at 12:13

2

The problem is that the <li> tag under #nav floated left which is keeps #nav from wrapping around it's inner content. If you add the clearfix css to your css and add this class you to your #nav '` it will force it wrap around the inner content and should give you the effect you're looking for.

Fiddle

Also <li> are meant to be wrapped in <ul> tags. You might want to change any <li>s not wrapped in a <ul> to a <div>.

edited May 23 '17 at 12:13

Community

1
1

answered May 15 '14 at 22:06

Ballbin

717
6
12

how can i make the menu 100% so there are no gaps left and right? – May 15 '14 at 22:37
There is no magic bullet to do that as the menu would need to flow with all of the different monitor sizes. There is plenty examples dynamic layouts on the web or SO that can get you in the right direction. The other is to fake it. Figure out a width, center the menu and removed the left and right most borders so that `#nav` will span the entire width with the background color and menu blends in... but again this is just my opinion. Good luck. – Ballbin May 15 '14 at 22:51

score -1 · Answer 2 · answered May 15 '14 at 21:53

-1

add this to CSS file

 body{
   background:#666666;
   width:100%;
 }

answered May 15 '14 at 21:53

luk492

350
3
15

well that clearly just does the whole page which isnt what i said – May 15 '14 at 21:54
hmm,sorry didnt understand.. When you said you want background color of 100% width I thougt you wanted it all that color. So you want just the nav background section that color? – luk492 May 15 '14 at 21:59
yeah just the nav background – May 15 '14 at 22:06

display background across whole menu bar

2 Answers2