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?

htmlcss

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

htmlcss

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Enhance the CSS styling for the React-Calendly integration in a React project

I am trying to customize the CSS of an Inline Widget called React Calendly. I have attempted to use React Styled Component Wrapper, Frame React Component, and DOM javascript but unfortunately, the design changes are not reflecting as desired. Specifically, ...

javascriptcssreactjsstyled-componentscalendly

Issue with Favicon display in all versions of Internet Explorer

Visit my website. I have attempted multiple solutions found on Stack Overflow and different forums, yet I am unable to make it work. The code runs perfectly in all browsers except for Internet Explorer (regardless of the version) :( Can anyone provide ass ...

htmlinternet-explorerfavicon

Determining the window height using jQuery when overflow is set to hidden

I've built a full screen web application that I don't want to scroll, so I used this code: $("body").css("overflow", "hidden"); However, after adding a resize listener: $(window).resize(function(){ console.log("Inner height: " + $(window). ...

jqueryhtmlcss

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

ioscssangulartypescriptionic-framework

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

jqueryhtmlautofill

Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here. .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left ...

htmlcssinternet-explorercss-animationsmicrosoft-edge

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

https://i.sstatic.net/dj4zb.png I have this image that I need to divide into three sections with a legend at the top, similar to the image shown. So far, this is the code I have, but I'm struggling with creating the vertical line, adding space betwe ...

javascripthtmlcssformsbootstrap-4

display the table without providing a preview

Hey everyone, I am currently utilizing vue.js to develop a table and I am looking for a way to add a button that can print the data in the table without displaying a preview dialog. What modifications should I make to my javascript code in vue? Here is an ...

javascripthtmlvue.js

What is the best way to align a div with a td within a table?

I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this? Here's my HTML code for the table : ...

htmlcss

The button functionality gets hindered within the Bootstrap well

I'm trying to figure out what's wrong with my code. Here is the code: https://jsfiddle.net/8rhscamn/ <div class="well"> <div class="row text-center"> <div class="col-sm-1">& ...

javascripthtmlcsstwitter-bootstrap

Alignment of Bootstrap input groups and buttons

I am looking to have the input group aligned on the left side and the "Add New" button aligned on the right side of the row. <div class="row"> <div class="input-group col-sm-6"> <input type="text" class="form-control" placehol ...

csstwitter-bootstrapbuttoninputalignment

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

Unlock the Power of Sockets in JavaScript and HTML

How can I work with sockets in JavaScript and HTML? Could HTML5 features be helpful? Are there any recommended libraries, tutorials, or blog articles on this topic? ...

javascripthtmlwebsocket

Tips for concealing a div using an article until it is activated by hovering over it

I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...

javascriptcsshtml

HTML5 - Transforming your webpages into interactive flipbooks

Is there a way to achieve a page-turn effect when loading external HTML pages into a div? I am interested in utilizing CSS3, HTML5 or jQuery for this purpose. ...

jqueryhtmlpage-flipping

In HTML, the size and position of an <a> element cannot be altered or adjusted

I am having trouble with an anchor element that is contained within a div. No matter what I try, I cannot resize or move it up or down without it covering its sibling element. I have attempted using transform-translate and margin properties, but to no avai ...

htmlcsssassscss-lint