I can't seen to get my menu looking right.
Above, is what it should look like. But I can't get it to look like that. What am I doing wrong?
<ul id="MainMenu">
<li>a</li>
<li>b
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>c
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
#MainMenu {
list-style-type: none;
}
#MainMenu li {
display: inline;
}
Should be:
#MainMenu li {
display: block;
}
you need 4steps for that sinceyou have multiple LI in different levels
*{
/* all sector for reset */
padding:0;
margin:0;
}
#MainMenu {
}
#MainMenu >li {
/*level 1 from root*/
}
#MainMenu ul {
}
#MainMenu ul li {
/*level 2 from root*/
}
#MainMenu li {
list-style-type: none;
/*all levels from root*/
}
then for you to see what is happening we first add this css to the first level of LIs
DEMO: http://jsfiddle.net/LcDY9/
#MainMenu >li {
display:inline-block;
text-align:center;
border:1px solid;
width:100px;
height:100px;
vertical-align:top;
}
now we add the all selector
*{
padding:0;
margin:0;
}
and finally we add padding to all LIs http://jsfiddle.net/LcDY9/2/
#MainMenu li {
list-style-type: none;
padding-top:6px;
}
and remove the solid border the have what you are looking for
border:1px solid;
Try something like this:
#MainMenu {
list-style-type: none;
}
#MainMenu>li {
float: left;
margin-right: 10px;
}
#MainMenu ul li {
list-style: none;
}
#MainMenu ul {
padding: 0;
}
JS Fiddle http://jsfiddle.net/L2wsA/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.