CSS display the menu wrongly -

this code suppose display movies when mouse places on issue here movie menu displays wherever mouse placed in header?

    <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 href="#">movies</a>                           <ul class="sub-menu">                 <li><a href="#">in cinemas now</a></li>                 <li><a href="#">coming soon</a></li>                 <li><a href="#">on dvd/blu-ray</a></li>                 <li><a href="#">showtimes &amp; tickets</a></li>              </ul> 

css code

.nav .sub-menu {             display:none; }  .nav:hover .sub-menu { display:block; } 

you need add hover movie element. works:

html:

 <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 id="movies">                           <a href="#">movies</a>                           <ul class="sub-menu">                 <li><a href="#">in cinemas now</a></li>                 <li><a href="#">coming soon</a></li>                 <li><a href="#">on dvd/blu-ray</a></li>                 <li><a href="#">showtimes &amp; tickets</a></li>              </ul> 

css:

.nav .sub-menu {                 display:none;     }      #movies:hover .sub-menu {     display:block;     } 

jsfiddle:

https://jsfiddle.net/yd8ddv4x/