CSS-Parent List在子元素上懸停時崩潰

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

請注意，您沒有發佈所有代碼，因此它可能會與您未發佈的內容發生衝突。