javascript - header menu using CSS -

how add sub menu under sub header , call using css, need display contents automatically when mouse place on it.

 <div class="navbar-collapse collapse">      <ul class="nav navbar-nav">           <li><a runat="server" href="~/">home</a></li>           <li><a runat="server" href="~/about">about</a></li>           <li><a runat="server" href="~/contact">contact</a></li>           <li><a runat="sever"  href="#">sub></a></li>      </ul>  </div> 

you need css rules this:

1. a class hides nav class inside of collapse class
2. a class displays nav class inside of collapse class when collapse hovered.

when hover on menu in snippet, see items being displayed. additionally, when hover on file or edit see li tags contained in each.

.collapse {    background-color: #aaa;    border: 1px solid black;    width: 100px;  }    .nav {    padding:10px;    margin:0;  }    .collapse .nav {    display : none;  }    .collapse:hover .nav {    display : block;    border-top: 1px solid #555;  }    .nav li {    display : none;  }    .nav:hover li {    display : block;  }

<div class="navbar-collapse collapse">    menu    <ul class="nav navbar-nav">      file      <li><a href="~/">home</a></li>      <li><a href="~/about">about</a></li>      <li><a href="~/contact">contact</a></li>      <li><a href="#">sub</a></li>    </ul>    <ul class="nav navbar-nav">      edit      <li><a href="#">cut</a></li>      <li><a href="#">copy</a></li>      <li><a href="#">paste</a></li>      <li><a href="#">select all</a></li>    </ul>   </div>