CSS causing navigation bar drop down content to be hidden when hovering

I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here?

HTML-:

<div id="nav_wrapper">
   <ul>
       <li><a href="#">maths</a>
           <ul class="one">
              <li><a href="#">real number</a></li> 
           </ul>
      </li> 
      <li><a href="#">english</a></li>
      <li><a href="#">hindi</a></li>
      <li><a href="#">french</a></li>
      <li><a href="#">german</a></li>    
   </ul>
</div>

CSS-:

#nav_wrapper {
    position: relative;
    top: 20px;
    left: 100px;
}

#nav_wrapper ul {
    list-style-type: none;   
}

#nav_wrapper ul li {
    outline: 1px solid white;
    width: 160px;
    text-align: center;
    position: relative;
    float: left;
    background: black;
}

#nav_wrapper ul li a {
    text-decoration: none;
    display: inline-block;
    height: 25px;
    width: 160px;
    padding-top: 7px;
    color: #DAA520;
}

#nav_wrapper ul ul.one {
    display: none;
}

#nav_wrapper ul li a:hover {
    color: wheat; 
}

#nav_wrapper ul li a:hover > ul.one {
    display: block;
}

Currently, when hovering over MATHS, the real number drop-down block is not appearing.

htmlcss

Answer №1

Make sure to target the next element and not the child with this code: a:hover + ul.one

CSS selector

Explanation

  1. > is used for a child parent > child
  2. + is used for the next element firstelement + nextelemnt

Example snippet for parent> child

.child,.second{
  display:none;
  }

.first:hover > .child{
  display:block;
  }
<div  class="first">hover me
<a class="child"> child open</a>
</div>

<div class="second" > I'm a next element</div>

Example snippet for firstelement + next element

.child,.second{
  display:none;
  }

.first:hover + .second{
  display:block;
  }
<div  class="first">hover me
<a class="child"> child open</a>
</div>

<div class="second" > I'm a next element</div>

#nav_wrapper
{


    position: relative;
    top: 20px;
    left: 100px;

}
#nav_wrapper ul{
 list-style-type: none;   
 }

 #nav_wrapper ul li{
     outline: 1px solid white;
     width: 160px;
     text-align: center;
     position: relative;
     float: left;
     background: black;

 }


 #nav_wrapper ul li a{
     text-decoration: none;
     display: inline-block;
     height: 25px;
     width: 160px;
     padding-top: 7px;
     color: #DAA520;


 }

 #nav_wrapper ul ul.one
 {
     display: none;
 }
 #nav_wrapper ul li a:hover {
      color: wheat; 

 }


 #nav_wrapper ul li a:hover + ul.one{
     display: block;

 }
<div id="nav_wrapper">
                   <ul>
                       <li><a href="#">maths</a>
                           <ul class="one">
                              <li><a href="#">real number</a></li> 
                           </ul>
                       </li> 
                       <li><a href="#">english</a></li>
                       <li><a href="#">hindi</a></li>
                       <li><a href="#">french</a></li>
                       <li><a href="#">german</a></li>    
                   </ul>

           </div>

Answer №2

Hey there! I would like you to test out this code snippet: a:hover + ul.one. Feel free to check out the demo link for a live example: Demo

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

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Fixing Cross-Browser Issues with the OnScroll Function

window.onscroll = function() { if( window.XMLHttpRequest ) { var bodyId=document.getElementById('bodymain'); if (bodyId.scrollTop > 187) { //make some div's position fixed } else { //mak ...

javascripthtmlcross-browser

Unable to access Form element in Firefox browser

I'm struggling with debugging unfamiliar problems. For instance, in my HTML there's a form: <form name="myForm" > <table> <tr> <td> <input type="radio" name="myType" value="val" onclick="someF ...

javascripthtmlformsfirefoxhtml-table

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

jqueryhtmlcssmousehover

Enhance the current menu item in WordPress by assigning a class to the anchor tag

function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...

phpjqueryhtmlcsswordpress

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

Activate all inactive input and selection elements

I need a solution to enable all disabled input and select elements before submitting the form in order to retrieve the values of those disabled elements. Here is what I have tried: function enable() { $('input[type="text"], input[type="chec ...

jqueryhtmlperformance

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

phphtmlcodeigniter

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

What is the best way to swap out an icon based on the chosen option?

Here is my code: $('#mySelect').on('change', function() { var value = $(this).val(); $(".title").html(value); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href=" ...

javascriptjqueryhtmlcss

Experiencing an unexpected wait before the requestAnimationFrame?

Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved an ...

javascriptcssanimationsvgrequestanimationframe

Full-screen Bootstrap burger navigation menu

Check out this code snippet on boot ply: I'm trying to create a full-screen menu with the same effect as the burger menu for non-mobile screens. Currently, the burger menu only shows up on mobile devices. Does anyone know how I can achieve this? Than ...

cssangularjstwitter-bootstrap

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

javascriptjqueryhtmlcssflickr

Concealing an input field in AngularJS

I am currently developing a login page with register and login options using AngularJS. The interface includes three input fields: username, password, and name. I aim to display the name field upon clicking the register button and hide it upon clicking t ...

htmlcssangularjs

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Is it possible to conceal a link once it has been visited?

I am trying to figure out how to remove a link from a page once it has been visited. However, I am facing privacy restrictions with the :visited pseudo-class. Is there a way to achieve this without using display: none? For example: .someclass a:link {dis ...

jqueryhtmlcss