The glitch in the horizontal dropdown menu

Could you please review this Fiddle link:

https://jsfiddle.net/wd9wj7oe/1/

The CODES are as follows:

HTML

 <nav id="navigation">
                    <ul class="menu">
                        <li><a href="#">home</a></li>
                        <li><a href="#">about</a></li>
                        <li><a href="#">products</a></li>
                            <ul>
                                <li><a href="#">Line 1</a></li>
                                <li><a href="#">Line 2</a></li>
                                <li><a href="#">Line 3</a></li>
                                <li><a href="#">Line 4</a></li>
                                <li><a href="#">Line 5</a></li>
                            </ul>
                        <li><a href="#">help</a></li>
                        <li><a href="#">join us</a></li>
                        <li><a href="#">contact</a></li>
                     </ul>
</nav>

CSS:

#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}

#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}

#navigation ul ul{
    left: 0;
    top: 100%;
    position: absolute;
    float: none;
    list-style: none;
}

#navigation ul ul li{
    display: none;
    left: 0;
    float: none;
    z-index: 1000;
}

#navigation ul li:hover > ul{
    display:block;
}

There seem to be two issues with the code:

1 - The sub-menu does not appear when hovering over "products" as expected.

2 - Even if it were to show up, the positioning of the sub-menu is incorrect.

Please assist! Thank you!

htmlcss

Answer №1

You seem to have the incorrect markup for a drop-down menu

Here is the corrected structure:

<ul>
    <li>item 1</li>
    <li>item 2
      <ul>
         <li>subitem 1</li>
         <li>subitem 2</li>    
         <li>subitem 3</li>
      </ul>
    </li>
    <li>item 3</li>
</ul>

And here is the correct CSS styling for your navigation menu:

ul{
    padding: 0;
}

#navigation {
    float: left;
    list-style: none;
    font-family: Arial;
    font-size: 20px;
    position: absolute;
}
#navigation li {
    list-style: none;
    float:left;
    padding-left: 28px;
    position: relative;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation ul ul {    
    position: absolute; left: auto; top: 100%;    
    list-style: none;
    display: none;    
    z-index: 1000;
}
#navigation ul ul li {    
    float: none;    
    padding: 0;
}
<nav id="navigation">
    <ul class="menu">
        <li><a href="#">home</a>

        </li>
        <li><a href="#">about</a>

        </li>
        <li><a href="#">products</a>

        
        <ul>
            <li><a href="#">Line 1</a>

            </li>
            <li><a href="#">Line 2</a>

            </li>
            <li><a href="#">Line 3</a>

            </li>
            <li><a href="#">Line 4</a>

            </li>
            <li><a href="#">Line 5</a>

            </li>
        </ul>
        </li>
        <li><a href="#">help</a>

        </li>
        <li><a href="#">join us</a>

        </li>
        <li><a href="#">contact</a>

        </li>
    </ul>
</nav>

Answer №2

To achieve the desired effect, it is important to remember to hide the ul element and not the individual li elements. Additionally, for proper positioning, make sure to apply position: relative to the selector #navigation li.

#navigation {
    float: left;
    list-style: none;
    font-family: Arial;
    font-size: 20px;
    position: absolute;
}
#navigation li {
    position: relative;
    list-style: none;
    float:left;
    padding-left: 28px;
}
#navigation ul ul {
    display: none;
    left: 0;
    top: 100%;
    width: 6em;
    position: absolute;
    float: none;
    list-style: none;
}
#navigation ul ul li {
    left: 0;
    float: none;
    z-index: 1000;
}
#navigation ul li:hover > ul {
    display:block;
}

https://jsfiddle.net/wd9wj7oe/5/

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

Transmit information from SerialPort to socket.io

I'm having difficulty with integrating socket.io, express, and node.js. I am successfully sending data from an Arduino to my command prompt using the serialport library. Now, I want to display this data on my web browser by utilizing the express libr ...

htmlnode.jsexpresssocket.ionode-serialport

Python: inserting loop output into an HTML element using the embed function

My Python function generates a list that looks like this: def get_items(argument): for item in items: print item When I pass an argument to the function and print it on the terminal with "get_items(test)", I get: item1 item2 item3 Now, ...

pythonhtmlfunctionloopscgi

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

I am facing an issue with the "Contact Me" tab as it does not display its content when clicked. Here is the code snippet: <body> <ul class="tabs"> <li data-tab-target="#home" class="active tab">Home< ...

javascripthtmlcss

showcase 7 content sections in a two-column layout

I have a large container with 7 smaller containers inside <div id="big_div"> <div>a</div> <div>a</div> <div>a</div> <div>b</div> <div>b</div> <div>b</div><div>b</d ...

csshtmllayout

JavaScript code: "Retrieve the div element and append metadata to the HTML file

Currently, I am utilizing the subsequent technique to save a target tag on my webpage as an HTML file. function retrieveHtml(filename, elId, format) { var htmlEl = document.getElementById(elId).innerHTML; if (navigator.msSaveBlob) { // IE 10+ ...

javascripthtml

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

htmlcsscss-paged-media

Adjust the pin position of the Ionic range

My Ionic application includes a range component. When the pin attribute is set to true in the HTML, a pin displaying an integer value appears on top of the knob when pressed, as shown in the image below: <ion-range min="-200" max="200" [(ngModel)]="sat ...

htmlcssionic-framework

IE compatibility with flexbox and columns

While everything is running smoothly on Chrome and Firefox, it seems that I have encountered a problem with IE (IE11). In my responsive layout, I am aiming for the menu to be horizontal in PC mode and vertical in tablet/mobile mode. It appears to be worki ...

cssflexboxinternet-explorer-11

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

After gaining experience with AngularJs, I am now looking to dive into Backbone.js. However, I am struggling to understand how this library handles routes and partial views/templates "injection". In Angular, we can easily set up static components like th ...

javascripthtmlangularjsbackbone.js

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

I've implemented a basic Bootstrap navbar from the example provided on the Bootstrap website at . However, when I tried to add custom text to the center of the navbar, it caused the "Contact Us" menu item to break onto two lines instead of staying on ...

htmlnavbarbootstrap-5

Arrangement within a span

I've been refreshing my HTML/CSS skills in preparation for a new job opportunity. The last time I dabbled in HTML was way back in 1999... Needless to say, I've fallen quite behind. As a big fan of the "Space Trader" game on Palm OS, I've tak ...

htmlcssweb

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

javascriptphpjqueryhtmlmysqli

Tips for generating an interactive collapse effect with the simple click of a button

Does anyone know how to implement a collapsible feature when a button is clicked? I would appreciate some assistance. Essentially, the goal is to extract data from the screen when the "Add" button is clicked, and then display it in a collapsible format. ...

htmljquerybootstrap-4

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

htmlcsscss-selectors

The form-control class in HTML prohibits the hiding of textboxes

The CSS class form-control is causing issues with hiding a textbox in HTML, I attempted the following: <input type="number" name="mfi_nam9" class="text1 form-control" id="mfi_name" hidden> However, it only works when I remove the form-control class ...

phphtmljquery

Creating an Angular form that adapts to changing input values

I'm encountering a problem with angular not recognizing the dynamic values from my inputs. My objective is to have angular populate hidden form fields with lat/lon when a user clicks on the map. The user then submits the form, but the data ends up mi ...

javascripthtmlangularjsformsdata-binding

hover-related problems when using bootstrap

I am experiencing an issue where the functionality works properly without using the link to bootsrap.css. <link rel="stylesheet" type="text/css" href="css/bootsrap.css"/> However, when I include this bootstrap link, the mouseover feature stops work ...

phpcsshtmltwitter-bootstrap

Best practices for managing a Media Stream in Node.js

One of the latest and most exciting features in modern browsers is HTMLMediaElement.captureStream(), which has recently been released in Chrome. Having grasped how it functions on the client side - allowing you to redirect the stream to other HTMLMediaEle ...

javascriptnode.jshtml

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

phphtml

CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using: h2.verticle{ color:#1a6455; border:0px solid red; writing-mode:tb-rl; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(90deg); -moz-transform:rota ...

css