What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio."

Below is the code snippet:

#navmenu ul {
  position: absolute;
  visibility: hidden;
  top: 30px;
}

#navmenu .hoverme:hover ul {
  visibility: visible;
}
<div id="wrapper">

  <div id="navmenu">
    <div class="hoverme"><a href="#">Portfolio</a>
      <ul>
          <li><a href="#">Reviews</a>
          </li>
          <li><a href="#">Appendix</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Company</a>
          </li>
          <li><a href="#">Individual</a>
          </li>
          <li><a href="#">Cert of Att</a>
          </li>
          <li><a href="#">Skills Prof</a>
          </li>
          <li><a href="#">Csmr Visits</a>
          </li>
          <li><a href="#">Income</a>
          </li>
          <li><a href="#">Roles</a>
          </li>
        </ul>
     </div>
  </div>

</div>

Can anyone see why it's not working? Any help would be greatly appreciated.

htmlcssdrop-down-menuhover

Answer №1

To ensure valid HTML markup, remember to properly close the li tag with portfolio after the child ul. Having a ul as a direct child of another ul is not allowed.

Referencing the HTML specifications:

Content model:

Zero or more li and script-supporting elements.

#navmenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 30px;
}
#navmenu ul li:hover ul {
  visibility: visible;
}
<div id="wrapper">
  <div id="navmenu">
    <ul>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Reviews</a>
          </li>
          <li><a href="#">Appendix</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Company</a>
          </li>
          <li><a href="#">Individual</a>
          </li>
          <li><a href="#">Cert of Att</a>
          </li>
          <li><a href="#">Skills Prof</a>
          </li>
          <li><a href="#">Csmr Visits</a>
          </li>
          <li><a href="#">Income</a>
          </li>
          <li><a href="#">Roles</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

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

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

javascripthtmljqueryajax

What is the best way to place a div within another div?

I am facing a challenge where I need to insert a new div within another div before all its existing contents. The issue is that the outer divs do not have unique IDs, only classes as selectors. Unfortunately, I do not have control over the generation of th ...

javascriptjqueryhtmldom-manipulation

Execute button click automatically upon page loading in AngularJS

I'm trying to figure out how to automatically trigger a button click on an AngularJS page when the page loads based on a querystring value. In a traditional asp.net web forms page, I could easily handle this scenario by calling Button1_Click(sender,e) ...

javascripthtmlangularjsbuttonclick

How to open a PDF file in a new tab using Angular

Within my Angular 12 application, I am seeking to enable users to "view" a PDF file stored locally in the application within a new tab on Google Chrome. Currently, when implementing the code below in HTML, the file downloads rather than opening in a new ta ...

javascripthtmlangulartypescript

Seamless Shift: Effortless Transition

I'm attempting to develop a unique hover effect for a button. Initially, the button only displays an outline and its name inside. However, upon hovering over the button, I want it to smoothly transition to my gradient background. Despite trying multip ...

htmlcss

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

htmlcsssassless

Setting up a preselected MySQL dropdown list using PHP

I am working on a form that needs to be populated with data from a MySQL table: $db = mysql_connect("localhost:3306", "user", "pass"); mysql_select_db("db",$db); $sql = "Select * from wp_awa_upload where uid = '$_SESSION[id]' and ...

phpmysqldrop-down-menu

Enhance the clarity of content within an IFrame by sharpening the focus on

I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...

javascripthtmlreactjsiframewidget

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

javascriptjqueryhtmlcss

The click event will not be triggered if the element is removed by my blur event

My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...

javascripthtmldom-events

Troubleshoot padding problems in mpdf

Note: mpdf 6.0 Greetings, In my efforts to produce precise PDFs using mpdf for future printing purposes, I have encountered an issue with the positioning of elements on the page. I require these elements to be positioned precisely from the top left corne ...

cssmpdf

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

javascriptjqueryhtmljsongson

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

Drag to rotate using JavaScript when the mouse is pressed down

I am experimenting with making a spinning wheel rotate as the user drags the mouse over it. The wheel consists of 3 pieces, so I have individually mapped each image to target the specific section of the wheel that I want to rotate. Currently, it is funct ...

javascripthtmlanimationrotationdrag

PHP mail function not working properly when ajax is used

On my MAC, I am attempting to utilize php mail with ajax implementation. I have simplified my code to just strings: In my .js file : function sendMail() { $('#sending').show(); $.ajax({ type:'POST', ...

phpjqueryajaxhtml

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

javascriptjqueryhtml

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...

javascriptjqueryhtml