How do I go about centering my drop-down nav menu?

I’m trying to figure out how to reposition the entire <ul> element to the center of the screen, yet every time I try a new method the drop-down items get jumbled up by either shifting slightly to the right or they lay on top of one another.

Can someone lend a hand, let me know what I’m doing wrong and give me some tips to make it a bit easier?

Here’s what I’m working with.

html,
body {
  margin: 0px;
  padding: 0px;
}

.menu ul {
  /*This is blank because nothing I tried works*/
}

ul {
  list-style: none;
  font-family: cursive;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  display: block;
  height: 50px;
  width: 200px;
  background-color: lightgray;
}

ul li a {
  display: block;
  color: black;
  text-decoration: none;
  line-height: 50px;
  text-align: center;
}

ul li a:hover {
  background-color: lightblue;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Test</title>
</head>

<body>
  <div class="menu">
    <ul>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</body>

</html>

1 answer

  • answered 2017-11-14 23:31 George Lopton

    ul {
      display: flex;
      justify-content: center;
    }
    

    You can apply this to your it is supposed to center the whole ul