html - A CSS Horizontal Menu with Vertical SubMenu -


i have horizontal menu, , contains menu vertical. should below, have been unsuccessful. can please help? have tried many things not sure how way:

enter image description here

                    <ul class="horizontallist">                         <li><a href="#">books</a>                             <ul>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                             </ul>                         </li>                         <li><a href="#">games</a>                             <ul>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                             </ul>                         </li>                          <li><a href="#">downloads</a>                             <ul>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                                 <li><a>item</a></li>                             </ul>                         </li>                     </ul> 

and css:

verticallist ul {     list-style: none;     list-style-type: none; }      .verticallist li {         display: block;     }  .horizontallist ul {     list-style: none;     list-style-type: none; }  .horizontallist {     display: inline; } 

the html code must be:

<ul class="horizontallist">     <li><a href="#">books</a>         <ul>             <li><a>item</a></li>             <li><a>item</a></li>             <li><a>item</a></li>         </ul>     </li>     <li><a href="#">games</a>         <ul>             <li><a>item</a></li>             <li><a>item</a></li>             <li><a>item</a></li>         </ul>     </li>      <li><a href="#">downloads</a>         <ul>             <li><a>item</a></li>             <li><a>item</a></li>             <li><a>item</a></li>         </ul>     </li> </ul> 

and css must be:

ul {     list-style-type:none; }  ul li {     display:inline-block;     position:relative } ul li ul {     position:absolute;     top:/* vary based on height of li*/;     left:0px; } 

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -