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 のボーダーの端まですべて展開されないことです。最初は、単純なボックスのサイズ変更を考えました: ボーダーボックスは問題を解決しますが、そうではありません。class="content" を使用して div を作成し、その中のリンクに class="mainbtn" とその境界線を加えた div 全体の幅を持たせる方法はありますか?

4

2 に答える 2