How can I have a list of lists, with the top-level li's being inline, and the lower-level lists being normal lists?
Hey so I have a list, with some of the items containing other lists. The first level of lists needs to be inline, but any list a level down should be normal list-item. It works better if I show you. This is what I have:
However, I want Home Profile Groups Events and Frequencies to all be in one straight line, with any child lists below them. Here is the CSS:
#box1, #box2, #box3 {
background-color: #FC9;
padding:10px;
text-align:center;
}
#box1 li, #box2 li, #box3 li {
display:inline;
font-size:24px;
list-style:none;
}
#box1 li ul, #box2 li ul, #box3 li ul {
display:list-item;
list-style:none;
}
#box1 li ul li {
display:list-item;
font-size:18px;
list-style:none;
border:none;
}
#box1 li ul li ul {
display:list-item;
list-style:none;
}
#box1 li ul li ul li {
font-size:12px;
list-style:none;
border:none;
}
#box2 {
background-color:#6F9;
}
#box3 {
background-color:#C9F;
}
and here is the HTML:
<div id="box1">
<ul>
<li>Home</li>
<li>Profile
<ul>
<li>Edit Profile</li>
<li>Inbox
<ul>
<li>New Message</li>
<li>Sent</li>
</ul>
</li>
<li>Photos</li>
<li>Buddies</li>
</ul>
</li>
<li>Groups
开发者_StackOverflow中文版 <ul>
<li>Create Group</li>
</ul>
</li>
<li>Events
<ul>
<li>Plan Event</li>
</ul>
</li>
<li>Frequencies</li>
</ul>
</div>
<div id="box2">
<ul>
<li>Sitemap</li>
<li>Help</li>
</ul>
</div>
<div id="box3">
<ul>
<li>Private Policy</li>
<li>Code of Conduct</li>
<li>Terms of Use</li>
</ul>
</div>
Thanks for any help you can give.
Try floating the outermost li
s:
#box1 li, #box2 li, #box3 li {
display:inline;
font-size:24px;
list-style:none;
float: left; /* float the outer ones so they line up next to each other */
}
/* snip */
#box1 li ul li {
display:list-item;
font-size:18px;
list-style:none;
border:none;
float: none; /* don't float the inner ones */
}
You'll need to add clear: both
to #box2
to get things to line up, too.
精彩评论