How to align the popup ul relatively the parent li [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
There is a code with menu and pop-up windows.How to make the pop-up ul in the middle of the parent 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>
Main
<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>
Color pencils<span>>></span>
<ul>
<li>White pencil</li>
<li>Red pencil</li>
<li>Green pencil</li>
<li>Blue pencil</li>
</ul>
<span>>></span>
</li>
<li>
Color paper
<span>>></span>
<ul>
<li>fdfd</li>
<li>dfdf</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

Answer 1

You will need to use some translateX and left for the dropdown ul and also set position:relative to the parent 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 {
position: relative;
padding-bottom: 15px;
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;
min-width: 150px;
left: 50%;
transform: translateX(-50%);
top: 100%;
}
#track-nav ul li {
float: none;
padding: 0;
}
#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: 50%;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
transform: translateX(-50%);
}
#track-nav li:hover ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 50%;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
transform: translateX(-50%);
}
#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>
Main
<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>
Color pencils<span>>></span>
<ul>
<li>White pencil</li>
<li>Red pencil</li>
<li>Green pencil</li>
<li>Blue pencil</li>
</ul>
<span>>></span>
</li>
<li>
Color paper
<span>>></span>
<ul>
<li>fdfd</li>
<li>dfdf</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>