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上则显示

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

请注意，您没有发布所有代码，因此可能与您尚未发布的内容发生冲突。

CSS-Parent List悬停在子元素上时折叠

2 个答案: