Click here to Skip to main content
14,603,943 members
Rate this:
Please Sign up or sign in to vote.
made a simple responsive header/nav and i'm not sure why my menu dropdown doesn't appear when i hover over the menu tab.

i've hidden my nav under line 36 and make it reappear line 53.

Pls help.

What I have tried:

<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;
  }
}
Posted
Updated 24-Jul-18 2:57am
Comments
Kailash Polai 29-Aug-17 5:38am
   
i think this because of this line
@media screen and (min-width: 768px) {

menu does not appear, please correct the css syntax errors
Rate this:
Please Sign up or sign in to vote.

Solution 2

Quote:
header > a:focus nav ul

That selector targets a <ul> tag inside a <nav> tag, which is inside a focussed <a> tag, which is a direct descendant of a <header> tag.

Now look at the structure of your markup:
div [class="wrapper"]
┊
┝ header
┊  ┊
┊  ┝ div [class="logo"]
┊  ┊
┊  └ a [menu]
┊
└ nav
  ┊
  └ ul

The <nav> you're trying to target isn't nested under the <a>; it isn't even nested under the <header>; it's a sibling of the <header>.

To make the menu work, you'd need to duplicate the <nav> under the menu trigger. However, you can't nest an <a> tag inside another <a> tag, so you'd need to change the menu trigger element. For example:
<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: You need the tabindex on the menu trigger, since a <div> can't be focussed without it.
   
Rate this:
Please Sign up or sign in to vote.

Solution 1

Add below media query in CSS and check

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

nav ul{display:block;}

}

Problem: On particular width "nav ul" is "display:none" ....
   
Comments
Member 13378341 22-Nov-17 10:00am
   
hey there! thanks for commenting. (kinda rusty on CSS since haha)

your solutions enable nav ul to show all the time. but in this case, i want the ul to be visible only when i hover over the menu tab. after i changed my code. it no longer works.


// 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;
  }
}

Rate this:
Please Sign up or sign in to vote.

Solution 3

Add (!important) tag end of display:block !important;
   
Comments
Richard Deeming 25-Jul-18 10:27am
   
Eight months too late. And you've already posted an answer for this one.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100