Member Avatar for 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 .

The link to the real sample menu is

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

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>
  • 2 Contributors
  • 2 Replies
  • 217 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Garidius

Dani AI

Generated

Short diagnosis: the gap is coming from the cascade and from using the wrong property. left: -10px on a statically-positioned element does nothing, and negative padding is invalid. The browser/user-agent and your theme can also add margin/padding to ul that will push the link block inward — that’s why margin-left:0px !important appeared to "fix" it: something else was winning in the cascade.

What to do (quick, safe fixes)

  • Prefer fixing specificity and placement rather than using !important. Put your override after the theme CSS (child-theme style.css or Appearance → Customize → Additional CSS).
  • Reset the UL and remove any built-in indentation, then make the anchor itself take the full clickable/visual area so hover fills the entire row.

Example overrides to try (place after theme CSS):

/* reset the top-level list and remove indentation */
#navigation > ul.top-level {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* make the A be the full row and get the hover background */
#navigation li a {
  display: block;
  width: 100%;
  box-sizing: border-box;    /* prevents width overflow when padding/borders exist */
  padding-left: 10px;        /* control text offset here */
}
#navigation li a:hover {
  background: #f90;          /* move hover background to the A so it fills the row */
}

/* if a less-specific theme rule still overrides, increase specificity instead of defaulting to !important */
html body #navigation > ul.top-level { margin-left: 0; padding-left: 0; }

Debugging tips

  • Use the browser inspector (Firebug/DevTools): select the UL or LI, look at the Styles/Computed panel to see which rule is winning and where it comes from (file/line). Toggle rules live to confirm the correct fix.
  • Avoid inline styles (e.g., style="...") where possible; they complicate overrides. Use a child theme or the WP “Additional CSS” box so your rule loads after the theme.

Following those steps removes the mystery and avoids brittle !important hacks. was right about replacing left: with margin; saw the symptom of cascade — the clean fix is higher-specificity placement or moving the hover to the anchor so the colored area truly fills the navigation width.

Recommended Answers

All 2 Replies

Member Avatar for hericles

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

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.