html - In a responsive site design, how do i put a list below other list that contains a sub-list without overlap the main lists -
i have lists sub-lists , need when window screen shrinks lists go below others don't overlap first ones sub-list.
html markup -
<div class="row-fluid"> <ul> <li class="menulinks">.....</div> <ul> <li class="submenulinks"><div>.....</div></li> </ul> </li> </ul> </div> css -
.sitemap .menulinks{ background-color:green; border-radius: 10px; margin-top: 20px; text-align:center; padding-top:10px; margin-left: 0px; margin-right:10px; color: #ffffff; height:35px; width:11%; float:left; min-width: 100px; display:block } submenulinks{ margin-top: 20px; margin-right:10px; color: green; } desired output in small screen: http://i.imgur.com/7zb6261.jpg 
existing : 
http://i.imgur.com/kziyvsk.jpg
pretty simple : remove fixed height of li.menulinks, add "header" (green rounded rectangle 35px height) div first child of li and...you're set !
look @ fiddle : http://jsfiddle.net/32pga/
<div class="sitemap"> <div class="row-fluid"> <ul> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> <li class="menulinks"> <div class="menulinks-header"></div> <ul> <li class="submenulinks"> <div>test 1</div> </li> <li class="submenulinks"> <div>test 2</div> </li> <li class="submenulinks"> <div>test 3</div> </li> <li class="submenulinks"> <div>test 4</div> </li> <li class="submenulinks"> <div>test 5</div> </li> <li class="submenulinks"> <div>test 6</div> </li> <li class="submenulinks"> <div>test 7</div> </li> <li class="submenulinks"> <div>test 8</div> </li> <li class="submenulinks"> <div>test 9</div> </li> </ul> </li> </ul> </div> </div> and css :
.sitemap .menulinks { margin-top: 20px; text-align:center; padding-top:10px; margin-left: 0px; margin-right:10px; color: #ffffff; width:11%; float:left; min-width: 100px; display:block; } .sitemap .menulinks-header { height:35px; background-color:green; border-radius: 10px; } .submenulinks { margin-top: 20px; margin-right:10px; color: green; } if give fixed height of 35px li.menulinks element, you're explicitly saying layout engine there room render element below green rounded rectangle - in other words, 35px below top of li.
note children of li elements displayed overflow. should add "overflow:hidden;" declaration li.menulinks, children not rendered.
let layout engine compute height of li elements not giving them height.
Comments
Post a Comment