Блог

Главная - Вопросы по программированию - Как исправить выпадающее меню

Как исправить выпадающее меню

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

Я тренирую свой CSS для перехода на JS, но я беспокоюсь, потому что у меня возникли некоторые проблемы с выпадающим меню.

Концепция, которую я уже понял, но когда я запускаю ее в работу, это как бы подслушивает и перемещает nav .

 header {
  overflow: auto;
}

header img {
  float: left;
  margin-left: 300px;
  margin-top: 10px;
}

header img:hover {
  opacity: 0.8;
}

nav {
  float: right;
  margin-right: 250px;
  margin-top: 40px;
}

nav ul {
  padding: 0px;
}

nav ul li {
  display: inline;
  margin-right: 50px;
  border-right: 1px solid black;
}

nav ul li:last-child {
  border-right: none;
}

nav ul li a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-family: roboto;
  margin-right: 50px
}

nav ul li a:hover {}

nav li ul {
  display: none;
}

nav li:hover ul {
  display: block;
  position: relative;
}

nav li:hover li {
  float: none;
} 
 <header>

  <img src="logo.png">

  <nav>

    <ul>
      <li>

        <a href="#">Menu 01</a>

        <ul>
          <li><a href="#">Submenu 01</a></li>
        </ul>

      </li>
      <li><a href="#">Menu 02</a></li>
      <li><a href="#">Menu 03</a></li>
      <li><a href="#">Menu 04</a></li>
    </ul>

  </nav>

</header>

Я отправил код с img тегом, просто чтобы прояснить положение материала. Я также изучаю материал, так что, вероятно, это будет очень плохо на других мониторах.

Комментарии:

1. отправил код с img*

2. Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. Как написано в настоящее время, трудно точно сказать, о чем вы спрашиваете.

Ответ №1:

 nav li ul{
   display: none;
   position:absolute;
}

nav li:hover ul{
    display: block;
}

вот и все

Комментарии:

1. ах, опереди меня! : D gg

Метки: