html - Multiple nested CSS menu, stretched vertically -


here css menu:

http://www.devinrolsen.com/wp-content/themes/dolsen/demos/css/infinite-sub-menu/

as can see, perfect, deeply-nested - not 100% widthed. want 100% stretched. if there 4 menu items, width must 25% each. have done far:

    <ul>         <li>menu item</li>         <li>             expandable ↓             <ul>                 <li>menu</li>                 <li>menu item</li>                 <li>menu item long                     <ul>                         <li>menu item long nested1</li>                         <li>menu item long nested2</li>                     </ul>                 </li>             </ul>         </li>         <li>e             <ul>                 <li>a</li>                 <li>b</li>                 <li>c</li>                 <li>d</li>             </ul>         </li>         <li>             expands             <ul>                 <li>hi.</li>                 <li>howdy</li>                                                 </ul>         </li>     </ul>     don't push me down...         ul {         display: table; /* css magic make menu... */         width: 100%;    /* ...stretch full width. */          table-layout: fixed; /* making menu items equal width */     }      li {         display: table-cell; /* comes ul{display:table} */         text-align: center;         }      li ul { display: none; } /* hiding submenus default */      li:hover ul {         display: block;     /* show submenus on mouseover...*/         width: 100%;         position: relative; /* ...and make them appear below, not inside */         height:0px; /* kind of hack, it's reason (remove see why) */     }     li:hover ul li {         display: block; /* make submenu items stack vertically */         width: 100%; /* 100% of parent container */     }  /* coloring */ li:nth-child(even){     background-color: lightblue;     } li:nth-child(odd){     background-color: lightskyblue;     } 

http://jsfiddle.net/6ptpd/86/

sadly, can take no more nested items. (the "menu item long nested2" doesnt appear in first example).

can me out?

you have padding on li's if make 25% believe break next line. try 22% width , see if gives effect want.


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -