Vertical ul li navigation with bigger centered dropdown - css

Question

I thought it would have been simple, I'm trying to make a small navigation with numbers which show a name below on hover which should be like this :
But I don't know how to keep it centered and without having big margins between numbers. Here is a JSFiddle
.dropdown {
font-size: 10pt;
width: 10px;
}
nav ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
nav a {
color: #444;
display: block;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li ul {
font-size: 10pt;
height: 20px;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}
nav li ul a {
background: #bbb;
}
Here the result thanks to #Ovakuro : JSFiddle

Answer 1

Here is a solution to your layout using flexbox. I've simplified your CSS quite a bit, let me know if you have any questions.
nav .cf,
.dropdown {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav .cf li {
position: relative;
}
nav .cf li a {
color: #444;
padding: 0 10px;
text-decoration: none;
}
nav .cf li:hover .dropdown {
opacity: 1;
visibility: visible;
}
/* style your dropdown menu here */
.dropdown {
width: 100%;
list-style: none;
font-size: 10pt;
position: absolute;
top: 30px;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdown li {
display: flex;
}
nav .cf .dropdown li a {
padding: 10px 20px;
background: #bbb;
text-align: center;
white-space: nowrap;
}
/* triangle */
.dropdown:after {
bottom: 100%;
content: " ";
position: absolute;
border: solid transparent;
border-bottom-color: #bbb;
border-width: 10px;
}
<nav>
<ul class="cf">
<li>
01
<ul class="dropdown">
<li>E-CAMPUS</li>
</ul>
</li>
<li>
02
<ul class="dropdown">
<li>PEGASEZBUZZ</li>
</ul>
</li>
</ul>
</nav>

Answer 2

To my knowledge, the only way to do this is to set a width to the ul children so you can center it after. It's necessary if you need to go beyond parents' width.
I use transform translate, but if you need to be fully backward compatible, you would do this in js. Also, you may have problems with screen sides this way, again, js is your friend.
Note : I added /* new */ in css so you can see what I did. ;) Cheers
.dropdown {
font-size: 10pt;
width: 10px;
}
nav ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
position: relative; /* new */
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
nav a {
color: #444;
display: block;
padding: 1em;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li ul {
font-size: 10pt;
height: 20px;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
left: 50%; /* new */
transform: translateX(-50%); /* new */
width: 200px; /* new */
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}
nav li ul a {
background: #bbb;
}
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">01</a>
<ul>
<li>E-CAMPUS</li>
</ul>
</li>
<li><a class="dropdown" href="#">02</a>
<ul>
<li>PEGASEZBUZZ</li>
</ul>
</li>
</ul>
</nav>

Answer 3

Is this close to what you wanted?
body {
background-color: black;
}
.dropdown {
font-size: 20pt;
width: 10px;
}
nav ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
nav a {
color: gray;
display: block;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li ul {
font-size: 10pt;
height: 20px;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
margin-top: -10px;
}
nav li ul li {
width: 100%;
}
nav li:hover ul:before {
content: "";
position: absolute;
bottom: -10px;
border-style: solid;
border-color: #EDEDED transparent;
display: block;
top: -8px;
bottom: auto;
right: 15px;
border-width: 0 10px 10px;
}
nav li ul a {
background: #EDEDED;
width: 100px;
margin-left: -25px;
margin-bottom: 100px;
padding: 10px;
color: #0050F7;
}
.dropdown:hover {
color: white;
}
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">01</a>
<ul>
<li>E-CAMPUS</li>
</ul>
</li>
<li><a class="dropdown" href="#">02</a>
<ul>
<li>PEGASEZBUZZ</li>
</ul>
</li>
</ul>
</nav>

Answer 4

Or if you want your hover tags always centered you may use this:
body {
margin: 0;
padding: 0;
}
.container {
background-color: black;
width: 500px;
height: 300px;
}
ul {
list-style: none;
color: #666;
font-size: 30px;
margin: 0;
padding: 0;
text-align: center;
padding-top: 20px;
position:relative;
}
ul li {
display: inline-block;
padding: 0 12px;
}
.hover {
position:absolute;
top:70px;
text-align:center;
width:100%;
left:0;
display:none;
}
.hover span {
display: inline-block;
background-color:#fff;
color:blue;
font-size:30px;
padding:12px 20px;
}
li:hover {color:#bbb;}
li:hover .hover {display:block;}
.hover:before {
content:"";
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
padding:0;
position:absolute;
top:-5px;
}
.hv1:before {left:154px;}
.hv2:before {left:214px;}
.hv3:before {left:278px;}
.hv4:before {left:340px;}
<div class="container">
<ul>
<li>01
<div class="hover hv1"><span>This is the first 1</span></div>
</li>
<li>02
<div class="hover hv2"><span>Tag2 here</span></div>
</li>
<li>03
<div class="hover hv3 "><span>Tag3 much much longer</span></div>
</li>
<li>04
<div class="hover hv4 "><span>Tag4</span></div>
</li>
</ul>
</div>
Notice you need a text covering enough room for the arrow to show