文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS Hover Divider

问CSS Hover Divider
EN

Stack Overflow用户

提问于 2017-04-17 14:19:45

回答 2查看 770关注 0票数 1

我正在做的这个项目是在纯HTML和CSS中。

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

这是我被困在- 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;
}

drop-down-menu

hover

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-17 14:24:47

你不能改变父母在孩子的事件上的风格。在我看来，实现你的结果的最好方法是添加以下内容：

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

JSFiddle

怎么回事？

票数 0

Stack Overflow用户

发布于 2017-04-17 14:36:50

在.container中，更改高度的值:50 of；:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43453297

复制

相似问题

问CSS Hover Divider
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Hover DividerEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Hover Divider
EN