i want make 2 columns drop down menu 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 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 use float left, 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 make css or query? ideas? thanks!!
if need stick html, can either reorder list items 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, works.
or, can separate list 2 lists (also not 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 content generated elsewhere, or you're unable adjust lists reason, list apart has article on this: http://alistapart.com/article/multicolumnlists
Comments
Post a Comment