CSS doesn't inheritance problem -
well, i'm working an ul - li multilevel menu , have problem.
firstly, code (i know it's not perfect crappy div automatically added 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 stylesheet i'll pointing page-navigation id & sub-menu class can totally skip other ids/classes.
the problem can't change width of links in sub-menu. don't know how. i'm totally lost.
as far can see 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 { display: inline-block; text-align: center; padding: 10px 0 0 0; text-shadow: #222 1px 1px 1px; width: 200px; height: 65px; }
and here's code 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; /* line doesn't work */ } .sub-menu li { width: 500px; /* line doesn't work ! */ } .sub-menu li { font: 10px verdana; tex-shadow: 1px 1px 0px #000; width: 100px; /* doesn't work :) */ height: 100px; /* doesn't work :) */ }
i know whole sub-menu inside of <li>
, can nothing (default wordpress behavior).
what now? :(
thaanks
you need specify full path, higher level items more specific. try this:
#page-navigation ul li .sub-menu li { width: 100px; }
Comments
Post a Comment