Question

Well, I’m working an an ul – li multilevel menu and have problem.

Firstly, some code (I know it’s not perfect but the crappy div is automatically added by WordPress):

<nav id="page-navigation">
<div class="menu-menu-container">
    <ul id="menu-menu" class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Pages</a>
            <ul class="sub-menu">
                <li><a href="#">One Column</a></li>
                <li><a href="#">Two Columns</a></li>
                <li><a href="#">Three Columns</a></li>
            </ul>
        </li>
    </ul>
</div>                

In my stylesheet I’ll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.

The problem is I can’t change WIDTH of links in sub-menu. I don’t know how. I’m totally lost.

As far as I can see this code overwrites them:

#page-navigation ul li {   
  float: left; 
  padding: 0;
  font-size: 1.2em;
  line-height: 1.2em;
  background-repeat: no-repeat;
  width: 200px;
  height: 65px; 
}

#page-navigation ul li a { 
    display: inline-block;  
    text-align: center; 
    padding: 10px 0 0 0;
    text-shadow: #222 1px 1px 1px;    
    width: 200px;
    height: 65px; 
}

And here’s the code for sub-menu items:

.sub-menu {
    border-radius: 5px;
    border: solid 1px #000;
    box-shadow: 0px 0px 25px #000;
    background-color: #222;
    height: 200px;
    width: 500px; /* THIS LINE DOESN'T WORK */
}

.sub-menu li {
    width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}

.sub-menu li a {
    font: 10px Verdana;
    tex-shadow: 1px 1px 0px #000;
    width: 100px; /* doesn't work :) */
    height: 100px; /* doesn't work :) */
}

I know the whole sub-menu is inside of a <li>, but can do nothing with that (default WordPress behavior).

What now? 🙁

Thaanks

Answer 1

You need to specify the full path, the higher level items are currently more specific. Try this:

#page-navigation ul li .sub-menu li {   
  width: 100px;
}