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>