nottezio
nottezio

Reputation: 5

Navbar stretch the full width of my page

So I'm using this man code http://www.lwis.net/free-css-drop-down-menu/ and I want to have the menu bar stretch the full width of my page.

I'm using the nvidia theme you can find the original code by downloading the zip file on the link above.

Fiddle http://jsfiddle.net/6Yy4R/

The css code

ul.dropdown {
    font: normal 16px "Square", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

ul.dropdown li {
    padding: 7px 0;
    background-color: #000;
    color: #fff;
    line-height: normal;
}

ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #005CE6; text-decoration: none; }
ul.dropdown a:active { color: #fff; }


ul.dropdown ul {
    width: 170px;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    text-transform: none;
    filter: alpha(opacity=90);
    -moz-opacity: .9;
    KhtmlOpacity: .9;
    opacity: .9;
}

ul.dropdown ul li {
    background-color: transparent;
    color: #000;
    filter: none;
}

ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
    background-color: transparent;
}

ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #fff; }
ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
ul.dropdown ul a:active { color: #fff; }

ul.dropdown *.dir {
    padding-right: 12px;
    background-image: none;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

ul.dropdown li a {
    display: block;
    padding: 7px 14px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding: 4px 5px 4px 14px;
 width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
background-color: #005CE6;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}

ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}

Upvotes: 0

Views: 86

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

If it's just a case of having the ul be full width you need to clear the floats and apply a bg color

JSFiddle

ul.dropdown {
    background-color: #f00;
    overflow:hidden; /* quick clearfix */
}

Upvotes: 1

Related Questions