CSS-родительский список Сбрасывается при зависании над дочерним элементом

Question

У меня есть список горизонтальной навигации. Как только я навещу над родительским элементом, он отображает дочерние элементы, но вместе с ним также разваливаются другие родительские элементы.

Это мой CSS код

.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; 
     } 

Если A и B являются родительскими элементами и D, E и F являются дочерними элементами, если он завис над А он отображает

A 
C D E 
B 

вместо

A 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> 

Answer 1

Это должно дать вам начать

.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>

Answer 2

Если вы плаваете в своем внутреннем списке слева, он должен работать. Попробуйте добавить следующий CSS:

ul li ul { 
    float: left; 
} 

Обратите внимание, что вы не размещать весь код так что он может вступать в противоречие с чем-то вы не разместили.