How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Question

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Show "News" in French when hovering over the French option.

ul#topmenu li a#HyperLink:hover ul {
  background-color: pink;
  display: list-item;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

You must refrain from using JQuery or JS to reveal "News" on hover. Utilize ids accordingly and feel free to introduce new ids or classes if necessary. How can this be resolved?

html css

Answer 1

Answer №1

Here is a solution that should work for you:

Simply update the selection to

ul#topmenu li a#HyperLink:hover+ul

and add display: list-item !important;. This adjustment should resolve your issue.

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

If you want to apply the :hover effect to the "News" link as well, you can also use the following approach:

Add the following code snippet:

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

This will ensure that once the "News" link is displayed, hovering over it will not cause it to disappear.

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Here is a solution that should work for you:

Simply update the selection to

ul#topmenu li a#HyperLink:hover+ul

and add display: list-item !important;. This adjustment should resolve your issue.

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

If you want to apply the :hover effect to the "News" link as well, you can also use the following approach:

Add the following code snippet:

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

This will ensure that once the "News" link is displayed, hovering over it will not cause it to disappear.

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

Answer 3

Answer №2

Consider using this more compact and efficient solution:

/** Hide the submenu by default. */
ul#topmenu li ul {
  display: none;
}

/** Show the submenu on hover of the menu item. */
ul#topmenu li:hover ul {
  background-color: pink;
  display: block;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu">
      <li><a href="#">News</a></li>
    </ul>
  </li>
</ul>

The current CSS rule attempts to target a <ul> element within an <a> element. Consider adjusting your CSS rules for simplicity.

Avoid inline CSS (e.g.

<ul id="Submenu" style="display:none;">

). It's recommended to define all CSS rules in the <style> element or an external CSS file.

You can also enhance your menu with the following:

/** Hide the submenu by default. */
ul li ul {
  display: none;
}

/** Show the submenu on hover of the menu item. */
ul > li:hover > ul {
  background-color: pink;
  display: block;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu">
      <li>
        <a href="#">News</a>
        <ul id="Submenu">
          <li>
            <a href="#">News</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 4

Consider using this more compact and efficient solution:

/** Hide the submenu by default. */
ul#topmenu li ul {
  display: none;
}

/** Show the submenu on hover of the menu item. */
ul#topmenu li:hover ul {
  background-color: pink;
  display: block;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu">
      <li><a href="#">News</a></li>
    </ul>
  </li>
</ul>

The current CSS rule attempts to target a <ul> element within an <a> element. Consider adjusting your CSS rules for simplicity.

Avoid inline CSS (e.g.

<ul id="Submenu" style="display:none;">

). It's recommended to define all CSS rules in the <style> element or an external CSS file.

You can also enhance your menu with the following:

/** Hide the submenu by default. */
ul li ul {
  display: none;
}

/** Show the submenu on hover of the menu item. */
ul > li:hover > ul {
  background-color: pink;
  display: block;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu">
      <li>
        <a href="#">News</a>
        <ul id="Submenu">
          <li>
            <a href="#">News</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 5

Answer №3

To make changes to your HTML, you must eliminate the style="display: none" attribute from the child element ul. Here is how your modified HTML should look:

<ul id="topmenu">
        <li class="langHorzMenu">
               <a href="#" id="HyperLink">French</a>
                            <ul id="Submenu">
                                <li><a href="#">News</a></li>
                            </ul>
        </li>
</ul>

Add the following CSS code:

ul#topmenu li ul{
  background-color: pink;
  display: none;
}
ul#topmenu li:hover ul{
  background-color: pink;
  display: block;
}

You can view a working example on this fiddle here.

Answer 6

To make changes to your HTML, you must eliminate the style="display: none" attribute from the child element ul. Here is how your modified HTML should look:

<ul id="topmenu">
        <li class="langHorzMenu">
               <a href="#" id="HyperLink">French</a>
                            <ul id="Submenu">
                                <li><a href="#">News</a></li>
                            </ul>
        </li>
</ul>

Add the following CSS code:

ul#topmenu li ul{
  background-color: pink;
  display: none;
}
ul#topmenu li:hover ul{
  background-color: pink;
  display: block;
}

You can view a working example on this fiddle here.

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Answer №1

Answer №2

Answer №3

Similar questions

What are the possibilities for modifying a MySQL database using HTML?

If the condition is based on the category in category.php and single.php

Utilize Multidimensional Arrays in HTML

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

The hover effect in CSS brings life to list items when filled with content

Forms for uploading and submitting multiple files

Clicking on a button within the parent element will enable you to remove the parent element multiple times with the use of VanillaJS

Ways to automatically divide lists into various div elements

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

What is the best way to determine the length of an array using input from an HTML form?

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Switch the orientation of a live table moving horizontally to vertically and vice versa

Struggling with aligning an image and text side by side in CSS

Tips for utilizing browser cache in AJAX requests to prevent loading the refreshed JSON file

Utilizing jQuery/Javascript to replicate the data from a table while excluding the header and then pasting it to the

Damaged background in Bootstrap interface modal

How can I set a default radio button selection when the page is loaded?

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

Disappearing White spaces in a Java Swing Label with HTML TagsIn a Java