creating a menu but can't get it to work ....... the li's won't stretch to 100%

 

#nav ul
{
position:absolute;
left:0px;
list-style: none;
margin: 0;
padding: 0;
border: none;
width:100%;
}
#nav li
{
width:100%;
border-bottom: 1px solid #90bade;
list-style-type:none;
margin: 0;
padding:0;
}
#nav li a
{
display: block;
margin:0;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #nav li a { width: auto; }
#nav li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

 

http://www.dadelandexecutiveofficesuites.com/wordpress/

Have you declared an appropriate width for the div #nav?

 

I haven't had a chance to look through the code but is there a reason that the #nav ul is position absolutely?

 

I would wipe the slate clean with the css you have and start over on that section. If its a fixed layout, avoiding %'s might make it easier for you.

Have you declared an appropriate width for the div #nav?

 

I haven't had a chance to look through the code but is there a reason that the #nav ul is position absolutely?

 

I would wipe the slate clean with the css you have and start over on that section. If its a fixed layout, avoiding %'s might make it easier for you.

 

im trying different things to get it to work, the ul & li displays to the right of the div, when its supposed to be 100% width, as i have put

A simple mistake, but it took me ages to find it after messing about with the styles.

 

 

Your style is

#nav ul

{

position:absolute;

left:0px;

list-style: none;

margin: 0;

padding: 0;

border: none;

width:100%;

}

 

where the ul is after #nav but your markup is <ul id="nav"> where the ul is before the nav so delete ul in the style

#nav /*ul*/

{

position:absolute;

left:0px;

list-style: none;

margin: 0;

padding: 0;

border: none;

width:100%;

}

 

The li tags are OK because they are after the #nav id.

 

I would also add left: 0; to the style for #sidebar although it isn't necessary because browsers assume 0 if not stated but position: absolute should have horizontal and vertical positions.

your an absolute star wickham, it works :-D

 

cheers mate