Плохое выравнивание при скрытии и скрытии Divs на Hover

Question

Прямо сейчас у меня есть кнопка с раскрывающимся списком, чтобы открыть две кнопки внизу. Моя проблема заключается в том, что он смешивается с выравниванием других кнопок при выпадающем списке.

Одна вещь, которую следует учитывать, - это «освободить место» для выпадающих списков, когда экран переходит на мобильный (поскольку кнопки стекаются друг на друга).

Так что прямо сейчас, он работает, как мне нравится в мобильном телефоне, и я ищу решение для рабочего стола или, возможно, новое решение, которое заставляет обе работать.

Мой единственный элемент списка пожеланий будет иметь переход для выпадающего списка, но в моем текущем решении используется отображение: нет по двум причинам: поскольку кнопки прозрачны, поэтому я не могу скрыть что-то позади них, а на мобильных устройствах я не могут сохранить пространство под ним, потому что они сложены друг на друга.

zackpyle.com/photography

<style> 
.wrapcenter{ 
    text-align:center; 
} 
.homebox{ 
    display:inline-block; 
    position:relative; 
    margin:25px; 
    border:1px; 
    border-style:solid; 
    border-color:white; 
    width:250px; 
    height:140px; 
    color:white; 
    background:rgba(255,255,255,.25); 
    transition: all 0.25s ease-in-out; 
} 
h4.homeboxtext{ 
    position: absolute; 
    top: 27%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.homebox:hover { 
background:rgba(255,255,255,.4) 
    } 

h4{ 
    font-size: 25px; 
    text-transform: none; 
    font-family: "Abel"; 
    line-height: 1.2em; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 400; 
    font-style: normal; 
} 
h5{ 
    font-size: 18px; 
    text-transform: none; 
    font-family: "Abel"; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 400; 
    font-style: normal; 
    transform: translate(0%, -70%); 
} 
.submenu { 
    display: none; 
    margin:25px; 
    border:1px; 
    border-style:solid; 
    border-color:white; 
    width:250px; 
    height:50px; 
    color:white; 
    background:rgba(255,255,255,.25); 
    transition: all 0.25s ease-in-out; 
    z-index: 999; 
} 
.div_one:hover .submenu { 
    display: block; 
} 
.homeboxphotography_wrapper { 
    display:inline-block; 
    z-index: 1; 
} 
</style> 


    <div class="container wrapcenter"> 
    <ul class="menu"> 
     <li> 
      <a href="/professional-gallery"> 
       <h5>Professional</h5> 
      </a> 
     </li> 
     <li> 
      <a href="/fun-gallery"> 
       <h5>For Fun</h5> 
      </a> 
     </li> 
     <li> 
      <div id="menu1"> 
       <h5>Travel</h5> 
      </div> 
      <ul class="submenu"> 
       <li> 
        <a href="/europe-gallery">Mainland Europe</a> 
       </li> 
       <li> 
        <a href="/iceland-gallery">Iceland</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Заранее спасибо!

Zack

Answer 1

Изменить с встроенного блока на поплавок.

.homeboxphotography_wrapper { 
float: left; 
} 

Будет лучше всего добавить медиа-запросы для складывания этих элементов для планшетных устройств.

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