` `CSS hover effect not displaying``

I am struggling with a CSS menu that features drop downs. While I have experience building drop down menus and working with CSS hover effects in the past, this particular menu is proving to be quite challenging.

After researching similar CSS :hover and CSS menu issues on Stack Overflow, it seems like the problem mainly lies in getting the CSS elements in the correct order. However, I am still unable to pinpoint where I am going wrong with the ordering.

Below is a snippet of my CSS code:

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.megamenu>li>.megapanel:hover{display:block;}

I have experimented with different combinations of CSS classes, as well as solely using .megapanel and .megapanel:hover.

However, whenever I refresh my browser and hover over the menu, nothing happens. Even when I inspect the dev tools in Chrome, the :hover CSS does not show up in the CSS list. I am completely stuck.

Here is a snippet of the affected HTML code:

<ul class="megamenu skyblue">
        <li><a class="color1" href="index.php">Home</a></li>
        <li class="grid"><a class="color2" href="#">Our Dogs</a>
            <div class="megapanel">
                <div class="row">
                    <div class="col1">
                        <div class="h_nav">
                            <ul>
                                <li><a href="sires.php">Males</a></li>
                                <li><a href="toy-females.php">Toy Females</a></li>
                                <li><a href="females-mini.php">Mini Females</a></li>
                                <li><a href="upcoming.php">Upcoming</a></li>
                                <li><a href="ref.php">Reference</a></li>
                                <li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a></li>
                                <li><a href="past.php">Past Puppies</a></li>
                            </ul>   
                        </div>                          
                    </div></div></div></li>

I am aware that the HTML snippet is incomplete, as my menu is quite long and I didn't want to overwhelm the post with unnecessary code. I'm confident that the solution is straightforward, yet I seem to be missing it.

htmlcss

Answer №1

To make something hoverable, it must not have a style of display:none.

Try moving the hover trigger to the parent element li.

.megamenu > li > .megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 33px;
  left: 0px;
  z-index: 99;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.megamenu>li:hover > .megapanel {
  display: block;
}


.megamenu > li {
  position: relative;
}
.megamenu > li > .megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 100%;
  left: 0px;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.megamenu > li:hover > .megapanel {
  display: block;
}
<ul class="megamenu skyblue">
  <li><a class="color1" href="index.php">Home</a>
  </li>
  <li class="grid"><a class="color2" href="#">Our Dogs</a>
    <div class="megapanel">
      <div class="row">
        <div class="col1">
          <div class="h_nav">
            <ul>
              <li><a href="sires.php">Males</a>
              </li>
              <li><a href="toy-females.php">Toy Females</a>
              </li>
              <li><a href="females-mini.php">Mini Females</a>
              </li>
              <li><a href="upcoming.php">Upcoming</a>
              </li>
              <li><a href="ref.php">Reference</a>
              </li>
              <li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a>
              </li>
              <li><a href="past.php">Past Puppies</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>

Answer №2

The problem lies in attempting to display the sub-menu upon hovering over an element that is initially hidden, resulting in nothing to hover over.

To resolve this issue, you should reveal the megapanel div when hovering over its parent li element, like so:

.megamenu>li:hover>.megapanel{display:block;}


.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.megamenu>li:hover>.megapanel{display:block;}
<ul class="megamenu skyblue">
    <li><a class="color1" href="index.php">Home</a></li>
    <li class="grid"><a class="color2" href="#">Our Dogs</a>
        <div class="megapanel">
            <div class="row">
                <div class="col1">
                    <div class="h_nav">
                        <ul>
                            <li><a href="sires.php">Males</a></li>
                            <li><a href="toy-females.php">Toy Females</a></li>
                            <li><a href="females-mini.php">Mini Females</a></li>
                            <li><a href="upcoming.php">Upcoming</a></li>
                            <li><a href="ref.php">Reference</a></li>
                            <li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a></li>
                            <li><a href="past.php">Past Puppies</a></li>
                        </ul>   
                    </div>                          
                </div>
            </div>
        </div>
    </li>
</ul>

Answer №3

Seems like the culprit lies within your CSS code.

Both lines contain the attribute display:none

I suggest removing it from 

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

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

Guide to positioning text alongside icons with Bootstrap

Struggling to align text next to these icons? Don't worry, we've all been there. Especially with bootstrap - it can be tricky! Can someone please guide me on how to do this? <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstr ...

htmlcsstwitter-bootstrapfrontend

Automation of transmitting HTML data to a database

After dabbling in web development for some time, I've come to realize that transferring data between an HTML form and a database can be quite challenging. My usual solution involves using an AJAX call to a PHP script, as illustrated in the image below ...

htmlajaxdatabasexmlhttprequesthttprequest

Ion-content - Consisting of three elements with varying vertical positioning

I've been facing a challenge trying to include 3 different components (such as buttons, images, etc.) with distinct vertical alignment within the same ion-view. One should be aligned at the top, one in the middle, and one at the bottom. Take a look a ...

cssionic-frameworkvertical-alignment

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Is it feasible to implement a table-responsive solution that adjusts column width based on the length of data within each column, while still allowing the thead to occupy the entire canvas width? For Example: (the last column with no content should take u ...

csshtml-tablebootstrap-4

Styling Overlapping Divs with CSS3

I am attempting to replicate this particular effect using HTML within the UIWebView control on iOS. The desired outcome is to simulate a progress bar on the listing. My current approach involved utilizing this method, however, as you can observe, adding pa ...

cssoverlapping

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Let's discuss how to include the scrollTop option

I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...

javascriptjqueryhtmlcss

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquerycssreactjsmaterial-ui

Certain Bootstrap 5 icons are failing to appear on the screen

I'm encountering an issue with Bootstrap 5 where certain icons are not displaying correctly. The bi-search icon shows up perfectly, but the bi-send icon is not being shown at all. I would usually include this in a code snippet, but it seems that featu ...

htmliconsbootstrap-5

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

I'm looking to have my character jump whenever I press any key on the keyboard. Is there a method to achieve this using "case..." functions? Thanks! Jordan ...

javascripthtmlcanvashtml5-canvaskeyevent

Solving the problem of Hover Effects in CSS

I am struggling to get the nav-link to be blue in color with a dark-blue hover effect. I managed to set the color correctly, but for some reason, the hover effect is not working. Can anyone help me figure out what the issue might be? Additionally, does any ...

htmlcssbootstrap-5

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

What could be the reason that my d3.tooltip is not functioning properly for these specific two lines on the chart?

I am currently experiencing issues with the d3.tool tip for my line charts. Additionally, I would like to adjust the y-axis scale to create larger gaps between the lines. Below are the codes used to generate the line charts: <!DOCTYPE html> <meta ...

htmljsond3.jsvisualizationlinechart

Ionic directive ng-disabled not functioning as expected

Upon running the Ionic application, I noticed that the radio button is not being disabled even with the use of ng-hide.<input type="radio" ng-disabled="true"> ...

htmlangularjsionic-framework

Alerting JavaScript with element Selector doesn't function at full capacity

I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...

javascriptjqueryhtmlnotifyjs

The reset function for the selector is failing to properly reset the data within the table

I need help with a selector that has multiple options and a reset button. When the reset button is clicked, it should reset the selector back to the first option. Although the selector resets as expected when the button is clicked, the data in the table r ...

javascripthtmlangularjs

What steps should be followed to incorporate a user image and name when a user submits a comment in a functional JavaScript comments section?

After stumbling upon a comment box submitted by the user Rick Hitchcock (link here), I realized that I need to incorporate a generic user image and a username (could be anonymous) when a user submits a comment. Unfortunately, I am clueless on how to achiev ...

javascripthtml

Lists within lists and the use of percentages

There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy. The issue with nested <ol>, <ul>, and <li> elements ...

htmlcsscss-position

The alignment of the text next to the icons is not correct

Is it necessary to use flexbox, or is there an easier way to achieve the same result? It has been a while since I last practiced and I can't seem to remember much. .sadaka-contacts p { color: #115c9b ...

htmlcssflexboxcss-grid