CSS-Parent List Collapses when hovered over a child element -

i have horizontal navigation list. once hover on parent element, displays child elements alongwith other parent elements collapses.

this css code

.header{     color:#ffffff;     height:60px;     width:100%;     margin:auto; } .header_logo{     width:40%;     height:100%;     float:left; } #logo{     height:100%;     top:0;     left:0;     width:50%; } .header_title{     width:60%;     float:left; } #titles{     position:absolute;     top:20px;     font-family: "times new roman", times, serif,georgia;     font-size:97%;     color:#b8b8b8; } ul{  list-style-type:none; }  li{     display:inline; }  a{     text-decoration: none;     color:inherit;     padding: 21px 10px; }  li a:hover{     background-color:#666699;      } ul li ul{     display:none;     }      ul li:hover ul{         display:block;         } 

if , b parent elements , d, e , f child elements, if hovered on displays

a   c d e b 

instead of

  b  c d e 

html

<div class="header">             <div class="header_logo">                 <img id ="logo" src="civic-logo.jpg">             </div>             <div class="header_title">                 <div id="titles">                     <ul>                         <li><a href="#">products</a>                               <ul>                                 <li><a href="#">cement</a></li>                                 <li><a href="#">steel</a></li>                                 <li><a href="#">bricks</a></li>                                 <li><a href="#">sand</a></li>                             </ul>                         </li>                         <li><a href="#">contact us</a> </li>                     </ul>                  </div>             </div>         </div> 

this should give start

.header{    color:#ffffff;    height:60px;    width:100%;    margin:auto;  }  .header_logo{    width:40%;    height:100%;    float:left;  }  #logo{    height:100%;    top:0;    left:0;    width:50%;  }  .header_title{    width:60%;    float:left;  }  #titles{    position:absolute;    top:20px;    font-family: "times new roman", times, serif,georgia;    font-size:97%;    color:#b8b8b8;  }  ul{    list-style-type:none;  }  li{    display:inline-block;  }    a{    text-decoration: none;    color:inherit;    padding: 21px 10px;  }    li a:hover{    background-color:#666699;    }  ul li ul{    display:none;  }    ul li:hover ul{    display: block;    position: absolute;    width: 100%;    top: 70px;    left: 0;    white-space: nowrap;  }

<div class="header">    <div class="header_logo">      <img id ="logo" src="civic-logo.jpg">    </div>    <div class="header_title">      <div id="titles">        <ul>          <li><a href="#">products</a>              <ul>              <li><a href="#">cement</a></li>              <li><a href="#">steel</a></li>              <li><a href="#">bricks</a></li>              <li><a href="#">sand</a></li>            </ul>          </li>          <li><a href="#">contact us</a> </li>        </ul>        </div>    </div>  </div>