hovering over a tag, but not showing the menu

Question

im trying to make a very simple menu here basically i want to hover over the link and a menu show up. but its not showing up! i nested 2 tags inside of each other and gave em ids. u can see the rest in code.

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        <div id="headermenu">
          <ul>
            <li><a>menue yek</a></li>
          </ul>
        </div>
      </a>
    </li>
  </ul>
</nav>

refer link : https://stackoverflow.com/questions/15543159/display-specific-div-on-hover-using-css-and-html-only — Sumit patel, Dec 05 '17 at 09:23
Possible duplicate of [Using only CSS, show div on hover over ](https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a) — Sumit patel, Dec 05 '17 at 09:24

score 1 · Answer 1 · answered Dec 05 '17 at 09:21

1

You have to remove the submenu from the a tag, and put the "amenu" id on the li item, like so:

.navbar{
   width:100%;
   height:30px;
   overflow: no-display;
}
#headermenu{
   display:none;
}

#amenu:hover #headermenu{
   display:block;
}

<nav class="navbar">
  <ul id="Header">
    <li id="amenu">
      <a>aaaa</a>
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

answered Dec 05 '17 at 09:21

Ioan-Radu Tanasescu

546
4
17

You were trying to put the submenu in the main tag, that does not work because if you click or hover anything inside the tag then you click or hover the tag, not what is inside it. It now works because now you are using the
as a container for both the tag and the submenu, and now you can click and hover the tag separately from the submenu.

Ioan-Radu Tanasescu

Dec 05 '17 at 09:28

To be honest I cannot really explain exactly why it wasn't working, all I know is that the tag behaves differently from a

tag, and trying to display a submenu from inside an tag just doesn't work, I don't exactly know why.

– Ioan-Radu Tanasescu Dec 05 '17 at 09:33

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Check your rendered html.

The Issue:

The behaviour you are observing is a result of the html not being processed in the manner in which you are expecting.

Most likely because you are trying to open another anchor link within an existing one, e.g: <a href="#">containing link <a href="#">nested link</a></a>

What's occurring in your use-case is most likely what's occurring in the embedded code snippet below:

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        <div id="headermenu">
          <ul>
            <li><a>menue yek</a></li>
          </ul>
        </div>
      </a>
    </li>
  </ul>
</nav>

Rendered Output:

Visible in DOM

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        </a><div id="headermenu"><a id="amenu">
          </a><ul><a id="amenu">
            </a><li><a id="amenu"></a><a>menue yek</a></li>
          </ul>
        </div>
      
    </li>
  </ul>
</nav>

You may notice that #headermenu is no longer a child of #amenu, so the following selectors #amenu:hover #headermenu fail as a result.

The Solution:

To rectify the above processing and formatting issues, consider making the dropdown element a sibling to the anchor link - and not nested within it. Then move your id selector to the containing list item itself (parent li), e.g:

<nav class="navbar">
  <ul id="Header">
    <li id="amenu"> <!-- add id attribute to containing element -->
      <a>aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Code Snippet Demonstration:

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

<nav class="navbar">
  <ul id="Header">
    <li id="amenu"> <!-- add id attribute to containing element -->
      <a>aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Alternatively:

You could keep the id attribute on the nested anchor tag and use the adjacent sibling combinator (+) instead.

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

/* use the adjacent sibling combinator (+) */
#amenu:hover + #headermenu {
  display: block;
}

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

hovering over a tag, but not showing the menu

2 Answers2

The Issue:

The Solution: