Сделайте div подходящим для границ?

Question

Так у меня есть следующий код 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» и div с классом = «mainbtn» следует развернуть список ссылок (я не учитывал анимации и переходы, поскольку это не является частью проблемы). Проблема в том, что ссылки внутри div с class = "content" не расширяют все, что было до края границы с div с классом = "mainbtn". Сначала я подумал, что простой размер коробки: border-box устранит проблему, но это не так. Любая идея, как я могу сделать div с class = "content", а ссылки внутри него имеют ширину всего div с классом = "mainbtn" ПЛЮС его границы?

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

Основная идея заключается в добавлении отображения на дисплее для вложенных элементов. которые все спрятаны в первую очередь ...