Я использовал теги NAV в HTML, и он не работает, как я хотел

Question

Это мой css и мой html5 для создания сайта, но панель навигации не лежит в ряду.

<nav>
  <ul>
    <div>
      <center>
        <ul class="menu">
          <li>
            <a href="Home.html"> <button>HOME</button> </a>
          </li>
          <li><a href="Gymset.html"><button>GYM SETS</button></a>
            <ul class="menu-con">
              <li><a href="#"><button>SET TẬP GYM TRONG NHÀ</a>
                <ul class="menu-con2">
                  <li><a href="#"><button>TẠ TẬP TAY</button></a></li>
                  <li><a href="#"><button>TẠ TẬP CHÂN</button></a></li>
                </ul>
              </li>
              <li><a href="#"><button>SET TẬP GYM NGOÀI TRỜI</button></a></li>
              <li><a href="#"><button>SET TẬP AN TOÀN</button></a></li>
            </ul>
          </li>
          <li><a href="Dotap.html"><button>Đồ tập</button></a></li>
          <li><a href="Gio hang.html"><button>Giỏ hàng</button></a></li>
          <li><a href="Lienhe.html"><button>Liên hệ</button></a></li>
      </center>
    </div>
    </ul>
</nav>

Можете ли вы, ребята, помочь мне исправить эти ошибки?

Answer 1

<nav> - простой элемент, такой же как <div>. Рекомендуется использовать тег nav, если содержимое вашего элемента является компонентом навигации. Это только семантика и не имеет другого стиля.

Если вы хотите создать горизонтальную навигацию, вы можете использовать список и стилизовать его, чтобы каждый li плавал влево, и вам, вероятно, захочется удалить стиль списка.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

Также рекомендуется не использовать кнопку внутри <a>, вы можете оформить свой тег <a> так, чтобы он выглядел как кнопка. Вот пример:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #bada55;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 8px;
  text-decoration: none;
}

li a:hover {
  background-color: #585858;
}

<nav>
  <ul class="menu">
    <li>
      <a href="Home.html"> HOME </a>
    </li>
    <li><a href="Gymset.html">GYM SETS</a>
      <ul class="menu-con">
        <li><a href="#">TRONG NHÀ</a></li>
        <li><a href="#">NGOÀI TRỜI</a></li>
        <li><a href="#">TOÀN</a></li>
      </ul>
    </li>
    <li><a href="Dotap.html">Đồ tập</a></li>
    <li><a href="Gio hang.html">Giỏ hàng</a></li>
    <li><a href="Lienhe.html">Liên hệ</a></li>
  </ul>
</nav>

Answer 2

Может быть, это может работать для вас, также, если вы создаете адаптивный сайт, вам нужно сначала узнать больше о мобильном и изменить некоторые правила CSS, добавив медиа-запросы ...

list-style: none, удалите стиль по умолчанию для списков. Тег

устарел, но вы все равно можете его использовать, но для лучшей практики вы можете использовать display: flex;и justify-content-center;

Полное руководство по Flexbox

Вы можете добавить несколько подменю следующим образом ...

* {
            padding: 0;
            margin: 0;
        }

        nav {
            background: #111;
        }

        ol,
        ul {
            list-style: none;
        }
        .menu {
            display: flex;
            justify-content: center;
        }
        .menu li a {
            background: #111;
            color: #ffffff;
            text-decoration: none;
            padding: 20px;
            display: block;
        }

        .menu li a:hover {
            background: green;
        }

        .menu li ul {
            display: none;
            position: absolute;
            min-width: 140px;
        }

        .menu li:hover>ul {
            display: block;
        }

        .menu li ul li {
            position: relative;
        }

        .menu li ul li ul {
            right: -140px;
            top: 0;
        }

    <nav>
        <ul class="menu">
            <li>
                <a href="Home.html"> HOME </a>
            </li>
            <li>
                <a href="Gymset.html">GYM SETS</a>
                <ul>
                    <li><a href="#">TRONG NHÀ</a></li>
                    <li><a href="#">NGOÀI TRỜI</a></li>
                    <li><a href="#">TOÀN</a></li>
                </ul>
            </li>
            <li><a href="Dotap.html">Đồ tập</a>
                <ul>
                    <li><a href="#">TRONG NHÀ</a></li>
                    <li><a href="#">NGOÀI TRỜI</a></li>
                    <li><a href="#">TOÀN</a>
                        <ul>
                            <li><a href="#">TRONG NHÀ</a></li>
                            <li><a href="#">NGOÀI TRỜI</a></li>
                            <li><a href="#">TOÀN</a>
                                <ul>
                                    <li><a href="#">TRONG NHÀ</a></li>
                                    <li><a href="#">NGOÀI TRỜI</a></li>
                                    <li><a href="#">TOÀN</a>
                                        <ul>
                                            <li><a href="#">TRONG NHÀ</a></li>
                                            <li><a href="#">NGOÀI TRỜI</a></li>
                                            <li><a href="#">TOÀN</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="Gio hang.html">Giỏ hàng</a></li>
            <li><a href="Lienhe.html">Liên hệ</a></li>
        </ul>
    </nav>

Answer 3

Вы можете следовать этому коду

<html>
<style>
    body{
        color: white;
    }

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

    ul li{
        float: left;
        width: 200px;
        height: fit-content;
        background: black;
        text-align: center;
        font-size: 20px;
        margin-right: 10px;
    }

    ul li a{
        color: white;
        display: block;
        text-decoration: none;
    }

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

    ul li ul li{
        display: none;
    }

    ul li:hover ul li{
        display: block;
    }

</style>
<body>
                <ul>
                    <li>
                        <a href="...">HOME</a>
                    </li>
                    <li>
                        <a>GYM SETS</a>
                        <ul>
                            <li><a>SET TẬP GYM TRONG NHÀ</a>
                            </li>
                            <li><a>SET TẬP GYM NGOÀI TRỜI</a></li>
                            <li><a>SET TẬP AN TOÀN</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="...">Đồ tập</a>
                    </li>
                    <li>
                        <a href="...">Giỏ hàng</a>
                    </li>
                    <li>
                        <a href="...">Liên hệ</a>
                    </li>
                </ul>
</body>
</html>