Make a div adjust to borders?

Question

So i have the following html/css code

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

The goal of this little exercise was to create a dropdown menu. So hovering above the "Hello" and the div with class="mainbtn" should expand the list of links (I've left out the animations and transitions since that isn't part of the problem). The problem is that the links inside the div with class="content" does not expand all the was to the edge of boarder of the div with class="mainbtn". At first i thought a simple box-sizing: border-box would fix the problem but it doesn't. Any idea how i can make the div with class="content" and the links inside it have the width of the entire div with class="mainbtn" PLUS its border?

Like this? http://codepen.io/anon/pen/bgWxZb – Michael Coker Jan 22 '17 at 22:10 — Michael Coker, Jan 22 '17 at 22:10
You mean `content` should overlap the `mainbtn`'s border? – Asons Jan 22 '17 at 22:14 — Asons, Jan 22 '17 at 22:14

Matthew · Accepted Answer · 2017-01-22T22:41:06.887

I find that it is easier to make a custom dropdown if you wrap the links that are supposed to appear in a ul tag.

In this fiddle I added the mainlink anchor tag into the content div then wrapped the other links in a ul tag with li tags around the anchor tags like so:

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

Then I use the css below to achieve the result that you see in the fiddle.

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

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

I also took the border from the mainbtn class and put it on the content class so the border would expand when the dropdown appears. You can see that here in this 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);
}

score 0 · Answer 2 · answered Jan 22 '17 at 22:50

See the following fiddle : https://jsfiddle.net/q9k87f5c/

This is probably the most minimal setup I could think of... fix the css to fit your needs.

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

the basic idea is adding an on hover display for the nested items. which are all hidden in the first place...

Make a div adjust to borders?

2 Answers2