Geek Answers Handbook

Vertical list in a horizontal list

I am trying to create a basic navigation, and I would like to have a horizontal list with a vertical list of elements:

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 am removing 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 am trying to avoid floating divs for each section of the header.

I am trying to use two css classes for uls, with the outer set being display:inline and the inner one being display:block , but I can't get it to work.

How do I do this, or do I need to float divs?

+4
source share
2 answers

You can float the first level li (to avoid "floating divs") or use display: inline-block for the first level li s. Whereas float will work for IE6 +, while inline-block limited only to those elements that usually display inline .

The main demonstration for the first (float of the first level li s):

  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>

The main demo for the second ( display: inline-block for the first level li s):

 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>
+7
source

try under the code in which i spent litle time for someone it needs

 <!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>
0
source

More articles:


All Articles