CODEWITHSUNDEEP
htmlcss
Brain Wong
Brain Wong

Reputation: 3

two columns for dynamic drop down menu

I want to make a two columns drop down menu like this.

Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 5
Sub Menu 2 | Sub Menu 6
Sub Menu 3 | Sub Menu 7
Sub Menu 4

Here is my code.

<style>
ul{
list-style:none;
}
li{
float:left;
}
li li {
width:50%;
}
</style>
<ul>
<li><a href="link1.html" target="_self">Main Menu 1</a>
<ul>
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 7</a></li>
</ul>
</li>
<li><a href="link2.html" target="_self">Main Menu 2</a></li>
<li><a href="#" target="_self" >Main Menu 1</a></li>
</ul>

But if I use float left, it becomes this.

Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 2
Sub Menu 3 | Sub Menu 4
Sub Menu 5 | Sub Menu 6
Sub Menu 7

How can I make it by CSS or Query? Any ideas? Thanks!!

Upvotes: 0

Views: 4033

Answers (2)

feesh
feesh

Reputation: 1248

If you need to stick to just HTML, you can either reorder your list items to fall in alternating order:

<ul>
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub7.html" target="_self">Sub Menu 7</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
</ul>

Which isn't great, but works.

Or, you can separate the list into two lists (also not the best solution).

<ul class="col1">
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
</ul>
<ul class="col2">
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 7</a></li>
</ul>

If your content is generated elsewhere, or you're unable to adjust your lists for some reason, A List Apart has a good article on this: http://alistapart.com/article/multicolumnlists

Upvotes: 2

webketje
webketje

Reputation: 10976

The answer: google it. "CSS multi-level navigation" brought me 29 800 000 results.

And tons of others.

Upvotes: 0

Related Questions