Menu
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?
692
The trick is to use the INDEX and COLUMN functions together, as follows. In the screenshot below, the formula =INDEX($A$10:$F$23,COLUMN(B1),4) has been entered into cell A26 and then copied across to repeat the schedule's vertical column of Interest horizontally on row 26.
Right-click the border of the shape or text box. On the shortcut menu, select Format Shape, and then select Text Box in the left pane. Under Text layout, select the option that you want in the Vertical alignment list.
By default, the HTML <ul> list will be rendered vertically with one list item on top of another. When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list. A horizontal list is commonly used for creating a website's navigation menu component.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
