Fill all space in CSS menu elements

[Garidius]

Hello everybody,

I have a CSS menu in a wordpress based site that I've got to work correctly after help received in this great forum. Thanks for that.

I only have one issue pending for this menu, I only would like help with the padding that it seems exists in "#navigation" div when hover using firebug as shown in image1 in this link sub-menu with padding .

The link to the real sample menu is http://SampleMenu

I would like to remove that "padding" in order the blue area (the link area "a") fills the "#navigation" div as this image

I've tried inserting "padding-left:-10px;" in #navigation {} and within #navigation ul {} and #navigation a {} but nothing happens.

Maybe someone could help me with the correct CSS rule needed to fix this.

Much appreciated in advance for any help.

Regards

For fast reference, I paste the CSS and HTML code below:

<style type="text/css">
#navigation {font-size:0.75em; width:200px;}
#navigation ul {margin:0px; padding:0px; left:-10px;}
#navigation li {list-style: none;}
#navigation ul.top-level {background:#000080;}
#navigation ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
font-size:13px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
}
#navigation li:hover {
background: #f90;
position: relative;
}
#navigation ul.sub-level {
display: none;
}
#navigation li:hover .sub-level {
background: #888;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 120px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:170px;
}
#navigation .sub-level {
background: #999;
}
</style>
<div id="navigation">
    <ul class="top-level">
        <li><a href="#" style="color:#fff;">Documents Updates</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Documents1</a></li>
                <li><a href="#">Sub Menu Documents2</a></li>
            </ul>   
        </li>       
        <li><a href="#" style="color:#fff;">Our History</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu History1</a></li>
            </ul>
        </li>
        <li><a href="#" style="color:#fff;">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu News1</a></li>
                <li><a href="#">Sub Menu News2</a></li>
            </ul>
        </li>
    </ul>
</div>

[hericles]

In your CSS #navigation ul style you have left: -10px. That should be margin-left: -10px;
This should make it move over.

[Garidius]

In your CSS #navigation ul style you have left: -10px. That should be margin-left: -10px; This should make it move over.

Hello hericles,

Thank you for reply and help.

Testing it seems to work and I see that the correct should be "margin-left:0px", but I'm not sure why only works if I add !important as below.

#navigation ul {margin-left:0px !important;}

Thanks for your help really, much appreciated.

Regards