Суть проблемы в следующем. Мне нужна языковая панелька, её обязательно верстать с помощью select>option? Или можно сделать просто списком? Если можно с помощью списка, то как вам мой вариант? Я уже пометил комментарием в коде, что блок .wrap-wrap мне нужен для позиционирования span-a и ul по центру по вертикали, но из этого вытекла вторая проблема, как сделать так, чтобы при наведении именно на ul блок .wrap-wrap получал свойство overflow: visible; ? Вообщем, буду рад услышать варианты!
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.wrapper{
width: 100%;
height: 50px;
background-color: #444;
position: relative;
}
/*wrap-wrap для позиционирования блока language и ul по центрну родительского */
.wrap-wrap{
position: absolute;
height: 27px;
top:50%;
transform: translate(0, -50%);
border: 1px solid #fff;
overflow: hidden;
}
.wrapper span, .wrapper ul{
display: inline-block;
background-color: red;
vertical-align: top;
padding: 3px 5px;
color: #fff;
line-height: 20px;
}
.wrapper ul{
padding-right: 30px;
}
.wrap-wrap ul li:hover .wrap-wrap{
overflow: visible;
}
<div class="wrapper">
<div class="wrap-wrap">
<span>Language : </span>
<ul>
<li>English</li>
<li>Deutch</li>
<li>Russian</li>
</ul>
</div>
</div>