How to align a menu made in Nav HTML+CSS

Asked

Viewed 97 times

3

I try to line up in all ways with text-align: center; but none of it works and when I spacing with left the sub-menus are misaligned from the menu!

* {
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: Roboto;
  box-shadow: 0px 0px 100px 20px;
}

.menu ul {
  list-style: none;
  position: relative;
}

.menu ul li {
  width: 150px;
  padding: 0px 10px;
  float: left;
  line-height: 30px;
}

.menu ul li a {
  text-align: center;
  font-size: 19px;
}

.menu a {
  padding: 15px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4d4d4d;
}

.menu ul ul {
  background-color: black;
  position: absolute;
  visibility: hidden;
}

.menu ul ul li {
  float: none;
  border-bottom: solid 1px #262626;
}

.menu ul li:hover ul {
  visibility: visible;
}

.menu a:hover {
  transition: all 0.4s ease;
  color: white;
  text-shadow: 3px 3px 20px;
}

.menu ul ul li {
  background-color: #1a1a1a;
}

.menu ul ul a {
  font-size: 17px;
}

.menu ul ul li a:hover ul ul ul {
  visibility: visible;
}
<body>
  <nav class="menu">
    <ul>
      <li><a href="#">5</a></li>
      <li><a href="#">4</a>
        <ul>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">3</a>
        <ul>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">2</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">1</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

css html5

1 answer

2


Remove the standard padding from <ul> and of <li>. Add the property padding: 0; in the classes .menu ul and .menu ul li. Do not use the float: left because it prevents centering menu items by aligning them on the left. Instead, place display: inline-block; in li and text-align: center; in the first ul menu.

Putting text-align: center; in the ul Father, you don’t have to put it on the children because they already inherit the property, avoiding repetition. In the CSS below I added comments on what was removed and what was added:

.menu ul{
text-align: center; /* adicionado */
list-style: none;
position: relative;
padding: 0; /* adicionado */
}

.menu ul li ul{
width: 100%; /* adicionado */
}

.menu ul li{
display:  inline-block; /* adicionado */
width: 150px;
padding: 0px 10px;
/*float: left;*/
line-height: 30px;
padding: 0; /* adicionado */
position: relative; /* adicionado */
}

.menu ul li a{
text-align: center;
font-size: 19px;
}

.menu a{
padding: 15px;
display: block;
/*text-align: center;*/
text-decoration: none;
color: #4d4d4d;
}

.menu ul ul{
background-color: black;
position: absolute;
visibility: hidden;
}

.menu ul ul li{
xxfloat: none;
display: block;
width: 100%;
border-bottom: solid 1px #262626;
}

.menu ul li:hover ul{
visibility: visible;
}

.menu a:hover{
transition: all 0.4s ease;
color: white;
text-shadow: 3px 3px 20px;
}

.menu ul ul li{
background-color: #1a1a1a;
}

.menu ul ul a{
font-size: 17px;
}

.menu ul ul li a:hover ul ul ul{
visibility: visible;
}
<nav class="menu">
        <ul>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a>
                <ul>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">3</a>
                <ul>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">2</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">1</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
        </ul>
    </nav>

  • Sorry sam, but I guess I didn’t specify well what I really wanted to do, I wanted to align the menu to the center of the screen without the sub-menus getting into confusion and misalignment!

  • See if that’s it now, buddy.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.