0

所以我有以下 html/css 代码

* {
    box-sizing: border-box;
}

.mainlink {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 30px;
    color: rgba(255,0,0,0.7);
    transition: 0.3s ease-in-out;
    text-decoration: none;
    padding: 10px;
}

.mainbtn {
    transition: 0.3s ease-in-out;
    border: 1px solid rgba(255,0,0,1);
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
}

.content a {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: rgba(255,0,0,0.7);
    display: block;
    list-style: none;
    background-color: #eee;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainbtn">
  <a href="#" class="mainlink">Hello</a>
  <div class="content">
    <a href="#">World</a>
    <a href="#">You</a>
    <a href="#">Me</a>
  </div>
</div>

这个小练习的目标是创建一个下拉菜单。因此，将鼠标悬停在 "Hello" 和带有 class="mainbtn" 的 div 上方应该会展开链接列表（我省略了动画和过渡，因为这不是问题的一部分）。问题是带有 class="content" 的 div 内的链接并没有扩展到带有 class="mainbtn" 的 div 的边界边缘。起初我认为一个简单的 box-sizing:border-box 可以解决问题，但事实并非如此。知道如何制作带有 class="content" 的 div 并且其中的链接具有带有 class="mainbtn" 的整个 div 的宽度加上它的边框吗？

4

2 回答 2

0

我发现如果您包装应该出现在ul标签中的链接，则更容易制作自定义下拉菜单。

在这个小提琴中，我将mainlink锚标签添加到contentdiv 中，然后将其他链接包装在ul标签中，并li在锚标签周围使用标签，如下所示：

<div class="mainbtn">
    <div class="content">
        <a href="#" class="mainlink">Hello</a>
        <ul>
            <li><a href="#">World</a></li>
            <li><a href="#">You</a></li>
            <li><a href="#">Me</a></li>
        </ul>
    </div>
</div>

然后我使用下面的 css 来实现您在小提琴中看到的结果。

.content ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .mainlink:hover ~ ul,
.content .mainlink ~ ul:hover {
    display: block;
}

我还从mainbtn班级中取出边框并将其放在content班级上，以便在出现下拉菜单时边框会扩大。你可以在这个更新的 fiddle中看到。

.mainbtn {
    transition: 0.3s ease-in-out;
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
    border: 1px solid rgba(255,0,0,1);
}
于 2017-01-22T22:28:56.613 回答
0

请参阅以下小提琴：https ://jsfiddle.net/q9k87f5c/

这可能是我能想到的最小的设置...修复 css 以满足您的需求。

<div class="items">
  <div class="item">
  Hello
  <div class="items">
    <div class="item">World</div>
  </div>
  </div>
</div>

.item{
  position:relative;
}
.item .items{
  display:none;
}
.item:hover .items{
  display:block;
  position:absolute;
}

基本思想是为嵌套项目添加悬停显示。这些都是一开始就隐藏的……

于 2017-01-22T22:50:49.017 回答