Vertical ul li navigation with bigger centered dropdown

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

score 1 · Answer 1 · answered Jul 18 '17 at 14:58

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><a href="#">E-CAMPUS</a></li>
      </ul>
    </li>
    <li><a class="dropdown" href="#">02</a>
      <ul>
        <li><a href="#">PEGASEZBUZZ</a></li>
      </ul>
    </li>
  </ul>
</nav>

Thanks Kiwad for your answer ! – Léo Durand Jul 19 '17 at 09:20 — Léo Durand, Jul 19 '17 at 09:20

Ricky Dam · Answer 2 · 2017-07-18T15:14:38.857

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><a href="#">E-CAMPUS</a></li>
      </ul>
    </li>
    <li><a class="dropdown" href="#">02</a>
      <ul>
        <li><a href="#">PEGASEZBUZZ</a></li>
      </ul>
    </li>
  </ul>
</nav>

Mine was hardcoded, ovokuro's solution with flexbox is very clean. I learned something today! I had no idea how people did the speech bubble look but now I know. Good question @Leshautsdurant :) — Ricky Dam, Jul 18 '17 at 15:38

score 1 · Accepted Answer · answered Jul 18 '17 at 15:17

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>
      <a href="#">01</a>
      <ul class="dropdown">
        <li><a href="#">E-CAMPUS</a></li>
      </ul>
    </li>
    <li>
      <a href="#">02</a>
      <ul class="dropdown">
        <li><a href="#">PEGASEZBUZZ</a></li>
      </ul>
    </li>
  </ul>
</nav>

score 1 · Answer 4 · answered Jul 18 '17 at 15:25

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

Thank you Alvaro for your answer ! – Léo Durand Jul 18 '17 at 15:28 — Léo Durand, Jul 18 '17 at 15:28

Vertical ul li navigation with bigger centered dropdown

4 Answers4