The issue of the drop-down menu not appearing persists when using HTML and CSS

ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; } 
ul#menu li a ,ul.sub-menu li a  
{ display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13); background-color:black; border-radius: 20px; } 
 ul#menu li a:hover ,ul.sub-menu li a:hover { background-color: crimson; font-weight: bold; color:white; display: block; border-radius: 20px;
}

ul#menu li { position: relative;

} ul#menu li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0px; width: 100px;

} ul#menu li :hover ul.sub-menu { display: block;

}

Dropdown Menu

menu1
menu2
submenu1
submenu2
submenu3
submenu4
     </li>

 </ul>
htmlcss

Answer №1

Make a simple change from ul#menu li :hover ul.sub-menu to ul#menu li:hover ul.sub-menu. This appears to be the only issue based on the provided HTML structure below.

<ul id="menu">
    <li>
      <a href="#">menu1</a>
    </li>
    <li>
      <a href="#">menu2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">submenu1</a>
          <a href="#">submenu2</a>
          <a href="#">submenu3</a>
          <a href="#">submenu4</a>
        </li>
      </ul>
    </li>
  </ul>

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

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Why are my indents disappearing when I save in VS Code?

Just starting out with HTML and running into an issue where my indents keep disappearing whenever I save. Here's an example of what's happening. Before saving: After saving: I've experimented with different formatting tools and double-che ...

html

Troubleshooting Problem with Padding in ion-content for Ionic Angular

I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...

javascriptcssangularjsionic-framework

The MVC 5 view is unable to display an HTML image when adding it within an appended div

Currently, I am working with ASP.net MVC5 at a novice level. I'm faced with the challenge of creating a div that displays an image using a JavaScript function. Here is the code snippet I have: function showLoadingImage() { $('#submit_Em ...

javascripthtmlcssasp.net-mvcmodel-view-controller

I need help picking out specific elements from this messy HTML code using XPath and lxml - any ideas on how to do

I am looking to extract specific strings from this HTML document using only lxml and clever XPath. The content of the strings may vary, but the structure of the surrounding HTML will remain constant. The strings I need are: 19/11/2010 AAAAAA/01 Normal U ...

pythonhtmlxpathlxml

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

htmlcss

Dealing with HTML fitting issues on screen dimensions

I'm currently working on a unique application that focuses on tracking and storing running/cycling routes through the integration of OSM/Google Maps. My goal is to have the application function seamlessly without any need for page scrolling, ensuring ...

htmlhtml-table

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

htmlcssangulartypescript

Trouble with the jQuery sliding animation speed

One of the challenges I'm facing involves two divs: left and right. I want to slide the left div, making the right div's width 100% when the left div is hidden. This setup works well, but when I try to adjust the speed (slow or fast), it doesn&ap ...

jqueryhtml

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...

cssheightcss-transitions

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Is there a way to create a hero section that fills 100vh minus the height of the header, especially when the height of the header is not fixed? I initially used CSS with a height property set to calc(100vh - 310px), where 310px represents the height of t ...

javascriptjqueryhtmlcssresponsive

Display duplicated options with Bootstrap selectpicker and organize them into optgroups

I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...

htmltwitter-bootstrapselectbootstrap-5

Adjust the Material UI Select component to accommodate the length of the label

Is there a way to automatically adjust the size of Material-UI's Select input based on the label? In the official demo, minWidth is added to the formControl element. However, I have multiple inputs and do not want to set fixed sizes for each one. Whe ...

cssreactjsmaterial-ui

Cells within a table are equivalent

I am attempting to ensure that all table cells match the size of the image, but for some reason, they are not aligning properly. Visit this link for reference. Here is a condensed version of the HTML code: <table> <tr> <td> ...

htmlcss

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Having trouble resolving this technical problem in Express.js and JavaScript programming

try { console.log('11111') const { data: { tasks }, } = await axios.get('/api/v1/tasks') console.log('22222 ' + await axios.get('/api/v1/tasks') ) console.log('33333 ' + tasks) https://i.sstatic.net/mLLV ...

javascripthtmlcssnode.jsexpress

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

cssangularprimeng

What is the best way to restrict the creation of objects in a JavaScript list?

Experiencing a fun challenge with HTML coding! Take a look at my ordered list in HTML: <ol id="myList"> <li>Tea</li> <li>Milk</li> <li>Water</li> </ol> <button onclick="myFunction()">Try it</ ...

javascripthtml

Is there a way to modify the standard width of semantic-ui sidebars?

I'm trying to adjust the width of semantic-ui sidebars, which are originally 275px wide. Where should I include the css/js code to make them wider or narrower? Here is their default code: .ui.sidebar { width: 275px!important; margin-left: -275 ...

htmlcsssemantic-ui

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap