Vertical List Within a Horizontal List
I'm trying to create a basic navigation and I'd like to have a horizontal list with a vertical items list:
Header 1 Header 2 Header 3
-Sub 1 开发者_如何转开发 -Sub 1 -Sub 1
-Sub 2 -Sub 2 -Sub 2
-Sub 3 -Sub 3 -Sub 3
I'm shooting for this markup, or something similar:
<ul>
<li><strong>Header 1</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a></li>
<li><a href="#" title="2">Jklmnopqr</a></li>
<li><a href="#" title="3">stuvwzyz</a></li>
</ul>
</li>
<li><strong>Header 2</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a></li>
<li><a href="#" title="2">Jklmnopqr</a></li>
<li><a href="#" title="3">stuvwzyz</a></li>
</ul>
</li>
<li><strong>Header 3</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a></li>
<li><a href="#" title="2">Jklmnopqr</a></li>
<li><a href="#" title="3">stuvwzyz</a></li>
</ul>
</li>
</ul>
I'm trying to avoid floating divs for each header section.
I've been trying to use two css classes for the uls, with the outer set to display:inline and the inner to display:block, but I can't get it to work.
How do I do this, or do I have to float divs?
You can float the first-level lis (to avoid 'floating divs'), or use display: inline-block for the first-level lis. Bearing in mind that floating will work for IE6+, whereas inline-block is restricted to only those elements that would normally display inline.
Basic demo for the first (float the first-level lis) suggestion:
ul {
width: 90%;
margin: 0 auto;
}
ul > li {
float: left;
width: 32%;
}
ul > li > ul {
display: block;
width: 100%;
}
ul > li > ul > li {
display: block;
float: none;
}<ul>
<li><strong>Header 1</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
<li><strong>Header 2</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
<li><strong>Header 3</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
</ul>Basic demo for the second (display: inline-block for the first-level lis) suggestion:
ul {
width: 90%;
margin: 0 auto;
}
ul li {
display: inline-block;
width: 32%;
}
ul li ul {
width: 100%;
}
ul li ul li {
display: block;
}<ul>
<li><strong>Header 1</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
<li><strong>Header 2</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
<li><strong>Header 3</strong>
<ul>
<li><a href="#" title="1">Abcdefghi</a>
</li>
<li><a href="#" title="2">Jklmnopqr</a>
</li>
<li><a href="#" title="3">stuvwzyz</a>
</li>
</ul>
</li>
</ul>try below code i spent a litle time for anyone needs this
<!DOCTYPE html>
<html>
<body>
<style>
.ul li {
float: left;
width:30%;
}
.ul>li ul{
display:block;
margin-left:-30px;
}
.ul>li ul>li{
display:block;
float:none;
}
.ul>li a{
color:white;
}
footer {
padding: 20px;
padding-bottom: 100px;
background: #333;
color:white;
}
</style>
<footer>
<div>
<ul class="ul">
<li>
naber
<ul>
<li><a href="#">link bir</a></li>
<li><a href="#">link bir</a></li>
<li><a href="#">link bir</a></li>
</ul>
</li>
<li>
dostum
<ul>
<li>birrr</li>
<li>iki</li>
<li>uc</li>
</ul>
</li>
<li>
nasılsın
<ul>
<li>bir</li>
<li>iki</li>
<li>uc</li>
</ul>
</li>
</ul>
</div>
</footer>
</body>
</html>
加载中,请稍侯......
精彩评论