Решение с переполнением и движением подменю
Описание следующее: я сделал фиксированное меню с фиксированной высотой, меню включает в себя второе подменю. Когда курсор находится над li, второе подменю li перемещается через область родителя. Меню 1lvl имеет большое количество включенных li. Я использую overflow-y:scroll для поиска всех пунктов меню 1lvl. Проблема, в которой мне нужна помощь: "Overflow-y" активирует "overflow-x"(...ow-x:auto) и нарушает движение подменю. Что я могу сделать для прокрутки элементов в меню и нормальной работы движения подменю? HTML:
<div class="ear_panel">
<ul class="lvl_1">
<li class="cl1">
<span>m1</span>
<ul class="lvl_2">
<li><span>1.1</span></li>
<li><span>1.2</span></li>
</ul>
</li>
<li class="cl2">
<span>m2</span>
<ul class="lvl_2">
<li>
<span>2.1</span>
<ul class="lvl_3">
<li><span>2.1.1</span></li>
<li><span>2.1.2</span></li>
<li><span>2.1.3</span></li>
</ul>
</li>
</ul>
</li>
<li class="cl3">
<span>m3</span>
<ul class="lvl_2">
<li><span>3.1</span></li>
<li><span>3.2</span></li>
<li><span>3.3</span></li>
</ul>
</li>
<li class="cl4">
<span>m4</span>
<ul class="lvl_2">
<li><span>4.1</span></li>
</ul>
</li>
<li class="cl5">
<span>m5</span>
<ul class="lvl_2">
<li><span>5.1</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl6">
<span>m6</span>
<ul class="lvl_2">
<li><span>документы</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl7">
<span>m7</span>
<ul class="lvl_2">
<li><span>документооборот</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl8">
<span>m8</span>
<ul class="lvl_2">
<li><span>other</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl9">
<span>m9</span>
<ul class="lvl_2">
<li><span>other</span></li>
</ul>
</li>
<li class="cl10">
<span>m10</span>
<ul class="lvl_2">
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl11">
<span>m11</span>
<ul class="lvl_2">
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
<li><span>other</span></li>
</ul>
</li>
<li class="cl12"><span>1</span></li>
<li class="cl13"><span>2</span></li>
<li class="cl14"><span>3</span></li>
<li class="cl15"><span>4</span></li>
<li class="cl16"><span>5</span></li>
<li class="cl17"><span>6</span></li>
<li class="cl18"><span>7</span></li>
<li class="cl19"><span>8</span></li>
<li class="cl20"><span>9</span></li>
</ul>
</div>
CSS:
.ear_panel
{
height: 100%;
width: 130px;
text-transform: uppercase;
font-weight: 600;
font-family: Arial;
font-size: 14px;
position: fixed;
left: 0;
top: 0;
//overflow-y: scroll; uncomment for break menu
}
.ear_panel *
{
margin: 0;
padding: 0;
transition: .4s;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.ear_panel span
{
word-wrap: break-word;
}
.ear_panel ul
{
list-style-type:none;
}
.ear_panel ul.lvl_1
{
text-align: center;
}
.ear_panel ul.lvl_1 li
{
height: 55px;
background-color: #1E4387;
margin: 0;
text-align:center;
cursor: default;
position: relative;
transition-timing-function: ease-out;
color: #fff;
border-top: 1px solid rgb(129,132,134);
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
.ear_panel ul.lvl_1 li:last-child
{
border-bottom: 1px solid rgb(129,132,134);
}
.ear_panel ul.lvl_1>li>span
{
position: relative;
top: 10px;
}
.ear_panel ul.lvl_1>li:hover>span
{
top: 20px;
}
.ear_panel ul.lvl_1 li:hover
{
background-color: rgb(0,138,210);
}
.ear_panel ul.lvl_2
{
position: absolute;
left: -333px;
top: -1px;
opacity: 0;
visibility:hidden;
transition: .4s;
}
.ear_panel ul.lvl_2 li
{
height: 38px;
width: 185px;
padding-top: 0;
margin-bottom: 0;
cursor: pointer;
left: 30px;
border: none;
}
.ear_panel ul.lvl_2>li>span
{
position: relative;
left: 0;
top: 8px;
}
.ear_panel ul.lvl_1 li:hover ul.lvl_2,
.ear_panel ul.lvl_2 li:hover ul.lvl_3
{
opacity: 1;
visibility:visible;
left: 116px;
}
.ear_panel ul.lvl_2 li:hover ul.lvl_3
{
left: 124px;
}
.ear_panel ul.lvl_3
{
position: absolute;
left: 0;
top: -1px;
opacity: 0;
visibility:hidden;
transition: .4s;
}
.ear_panel ul.lvl_2 ul.lvl_3
{
margin-left: 33px;
}
.ear_panel ul.lvl_2 .lvl_3 span
{
top: 8px;
position: relative;
}
.ear_panel ul.lvl_2 .lvl_3 span,
.ear_panel ul.lvl_2 span
{
font-size: 12px;
}
/*код расположения иконок в блоках уровня 1*/
/*Их общшие свойства*/
.ear_panel ul.lvl_1>li:before
{
font-weight: 400;
position: absolute;
opacity: .2;
font-size: 44px;
left: 0;
width: 100%;
-webkit-transition: all .6s;
-moz-transition: all .6s;
transition: all .6s;
font-family: "icomoon_test";
font-size: 50px;
top: 0;
}
.ear_panel ul.lvl_2>li:hover>span
{
left: 20px;
}