How can the pop-up ul be positioned in the center of the parent li using CSS?
* {
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="/">Main</a>
<span>>></span>
</li>
<li>
<a class="consum" href="/product/catalog">Matherials</a><span>>></span>
<ul>
<li>First gdgsfgs dfghdsfh</li>
<li>Second</li>
<li>Third</li>
<li>Fouth</li>
<li>Fifth</li>
</ul>
</li>
<li>
<a href="/cat/zhestkie-listovye-materialy">Color pencils</a><span>>></span>
<ul>
<li>White pencil</li>
<li>Red pencil</li>
<li>Green pencil</li>
<li>Blue pencil</li>
</ul>
<span>>></span>
</li>
<li>
<a href="/cat/listovoi-pvh">Color paper</a>
<span>>></span>
<ul>
<li>fdfd</li>
<li>dfdf</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>