Question

所以我有以下html / css代码

＆＃13;

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

＆＃13;

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

＆＃13;

这个小练习的目标是创建一个下拉菜单。所以徘徊在＆＃34; Hello＆＃34;和class =＆＃34; mainbtn＆＃34;应该扩展链接列表（我已经省略了动画和过渡，因为这不是问题的一部分）。问题是div里面的链接有class =＆＃34; content＆＃34;并没有将所有的东西扩展到div的边界边缘，类=＆＃34; mainbtn＆＃34;。起初我认为一个简单的盒子大小：边框可以解决问题，但它没有。任何想法我怎么能用class =＆＃34; content＆＃34;并且其中的链接具有整个div的宽度，其中class =＆＃34; mainbtn＆＃34;加上它的边界？

Answer 1

如果您打包应该出现在ul标记中的链接，我发现自定义下拉列表更容易。

在此fiddle中，我将mainlink锚标记添加到content div中，然后将其他链接包含在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班级上，以便在下拉列表显示时边框会展开。您可以在此updated 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);
}

Answer 2

请参阅以下小提琴：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;
}

基本思想是为嵌套项添加悬停显示。这些都隐藏在第一位......

div调整到边框？

2 个答案: