Здравствуйте, есть код меню со сплывающими окнами , как можно сделать так,чтоб всплывающие ul
были посередине родительского li
?
* {
margin: 0;
padding: 0;
}
#track-nav {
margin-left: 50px;
margin-top: 50px;
float: left;
width: 100%;
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#track-nav li {
float: left;
margin-right: 10px;
display: block;
}
.track-nav-menu {
display: inline-block;
}
#track-nav ul {
list-style: none;
position: absolute;
display: none;
opacity: 0;
-webkit-transition: 0.25s linear opacity;
padding-bottom: 2px;
}
#track-nav ul li {
float: none;
}
#track-nav ul a {
white-space: nowrap;
display: block;
}
#track-nav li:hover ul {
display: block;
opacity: 1;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.32);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
#track-nav li:hover ul li {
padding: 10px 10px 0 10px;
}
#track-nav li:hover ul:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 35px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
#track-nav li:hover ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
#track-nav li:hover a {
white-space: nowrap;
}
.clearfix_track:after {
content: "";
display: table;
}
#track-nav li:hover ul a {
text-decoration: none;
-webkit-transition: -webkit-transform 0.075s linear;
white-space: nowrap;
}
<div id="main">
<div id="track" class="container">
<nav class="nav-menu">
<ul id="track-nav" class="clearfix_track">
<li>
<a href="/">Главная</a>
<span>>></span>
</li>
<li>
<span class="consum"> <a class="consum" href="/product/catalog">Материалы</a></span>
<span>>></span>
<ul>
<li>Первый gdgsfgs dfghdsfh</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
<li>Пятый</li>
</ul>
</li>
<li>
<a href="/cat/zhestkie-listovye-materialy">Цветные карандаши</a>
<ul>
<li>Вспененные ПВХ листы</li>
<li>Красный dfdfd</li>
<li>Зеленый dfdfd</li>
<li>Синий dfdf</li>
</ul>
<span>>></span>
</li>
<li>
<a href="/cat/listovoi-pvh">Бумага цветная</a>
<span>>></span>
<ul>
<li>fdfd</li>
<li>dfdf</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>