Member 13378341 Ответов: 3

Навигационная панель меню не отображается

сделал простой отзывчивый заголовок/навигацию, и я не уверен, почему мое выпадающее меню не появляется, когда я навожу курсор на вкладку Меню.

я спрятал свой навигатор под строкой 36 и заставил его снова появиться в строке 53.

Пожалуйста, помогите.

Что я уже пробовал:

<pre></pre>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple dropdown Nav Exercise</title>
</head>
  
  <!-- try making a mobile menu dropdown -->
<body>
   <div class="container-fluid">
     <div class="wrapper">
       <!-- logo and mobile menu -->
       <header>
         <div class="logo">
           <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
         </div>
         <a href="#">Menu</a>
       </header> 
       
       <nav>
        <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
        </ul>
       </nav>
     </div>
     
  </div>
</body>
</html>


body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
header .logo img {
  max-width: 100%;
  width: 50px;
  height: auto;
}

header > a {
  padding: 10px;
  background-color: #555;
  text-decoration: none;
  color: #fff;
}

header > a:hover, header > a:focus {
  color: #1c1c1c;
  background: #ccc;
}

nav ul {
  margin: 0;
  padding: 0;
  background-color: #222;
  display: none;
}

nav li {
  padding: 10px;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #fff;
}

nav li:hover {
  background-color: #333;
}

header > a:focus nav ul {
  display: block;
}

@media screen and (min-width: 768px) {
  header > a {
    display: none;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
    background: none;
    position: relative;
    top: -40px;
  }

  nav li {
    display: inline-block;
  }

  nav a {
    padding: 10px;
  }
}

Kailash Polai

я думаю это из-за этой строки
@media screen and (min-width: 768px) {

меню не появляется, пожалуйста, исправьте синтаксические ошибки css

3 Ответов

Рейтинг:
2

Anil Bandela

Добавить медиа-запрос в CSS и проверить

@media screen and (min-width: 130px) and (max-width: 767px) {

nav ul{дисплей:блок;}

}

Проблема: на определенной ширине "nav ul" - это "display:none" ....

Member 13378341

эй, там! спасибо за комментарий. (вроде как ржавый на CSS с тех пор, как ха-ха)

ваши решения позволяют nav ul показывать все время. но в этом случае я хочу, чтобы ul был виден только при наведении курсора мыши на вкладку Меню. после того, как я изменил свой код. это больше не работает.


// displaying none as default
nav ul {              
  display: none;
}


// media query

                      // displaying block when menu btn hover

@media screen and (min-width: 130px) and (max-width: 767px) {
  header a:focus nav ul {
    display: block;
  }
}

Рейтинг:
2

Anil Bandela

Добавить (!important) тег конец дисплея:block !important;

Richard Deeming

Восемь месяцев слишком поздно. И вы уже опубликовали ответ на этот вопрос.

Рейтинг:
0

Richard Deeming

Цитата:
header > a:focus nav ul

Что селектор цели <ul> бирка внутри а <nav> бирка, которая находится внутри сфокусированного <a> тег, который является прямым потомком а <header> метка.

Теперь посмотрите на структуру вашей разметки:
div [class="wrapper"]
┊
┝ header
┊  ┊
┊  ┝ div [class="logo"]
┊  ┊
┊  └ a [menu]
┊
└ nav
  ┊
  └ ul

То <nav> вы пытаетесь нацелиться на то, что не вложено под <a>; он даже не вложен под <header>; это же ... родной брат из <header>.

Чтобы заставить меню работать, вам нужно будет продублировать <nav> под триггером меню. Однако вы не можете вложить <a> тег внутри другого <a> тег, поэтому вам нужно будет изменить элемент триггера меню. Например:
<div class="wrapper">
  <!-- logo and mobile menu -->
  <header>
    <div class="logo">
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
    </div>
    <div class="menu" tabindex="0">
      Menu

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </div>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
header > .menu:focus nav ul {
  display: block;
}

NB: Вам нужно ... tabindex на спусковом крючке меню, поскольку <div> без него невозможно сосредоточиться.