Question

我正在研究的这个项目是Pure HTML＆amp; CSS。

我有一个带有CSS悬停属性的菜单栏，我想要完成的是绿色水平悬停线，当菜单下拉盘旋时如图所示here。

以下是我被困在 - https://jsfiddle.net/Kitana16/t0mx1h8f/

的地方

HTML

<!DOCTYPE html>
<body>

<div class="container">
  <a href="#home">CONTACT</a>
  <a href="#home">BLOG</a>
  <div class="dropdown">
    <button class="dropbtn">PRODUCTS</button>
    <div class="dropdown-content">
      <a href="#">NEW ARRIVALS</a>
      <a href="#">FEATURED</a>
      <a href="#">TOP RATED</a>
      <a href="#">HIS</a>
      <a href="#">HERS</a>
      <a href="#">KIDS</a>
      <a href="#">ACCESSORIES</a>
      <a href="#">SPRING CATALOG</a>
      <a href="#">THE ESSENTIALS</a>
      <a href="#">SALE</a>
    </div>
   </div>
   <div class="dropdown">
    <button class="dropbtn">LOCATIONS</button>
    <div class="dropdown-content">
       <a href="#">AUSTIN, TX</a>
      <a href="#">ATLANTA, GA</a>
      <a href="#">SEATTLE, WA</a>
      <a href="#">PORTLAND, OR</a>
    </div>
  </div> 
   <div class="dropdown">
    <button class="dropbtn">ABOUT</button>
    <div class="dropdown-content">
      <a href="#">OUR STORY</a>
      <a href="#">OUR COMMITMENT TO YOU</a>
    </div>
  </div> 
</div>

<div style='position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%'>
  <img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>


</body>

CSS

 .container {
    overflow: hidden;
    background-color: white;
    font-family: Arial;
    margin: -8px;
    height: 60px;
}

.container a {
    float: right;
    font-size: 16px;
    color: #36363F;
    text-align: center;
    padding: 15px 70px;
    text-decoration: none;
    font-family: calibri;
}

.container b {
    float: right;
    font-size: 16px;
    color: #36363F;
    text-align: center;
    padding: 15px 70px;
    text-decoration: none;
    font-family: calibri;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: #36363F;
    padding: 15px 50px;
    background-color: inherit;
    font-family: calibri;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: #33CB98;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #33CB98;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
background-color: #019966;
}

.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

您不能在孩子的活动中更改父母的风格。在我看来，实现结果的最佳方法是添加：

.container:hover {
    box-shadow: inset 0 -5px 0 0 #33CB98;
}

JSFiddle

怎么样？

Answer 2

在.container中改变高度值：50px; ：）

CSS Hover Divider

2 个答案: