The CSS dropdown menu is having trouble showing up correctly

I am struggling with a CSS issue that is really frustrating me. HTML:

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">More</a></li>
                <li><a href="#">Hawa</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#nav {background: #008080;position:relative;}
#nav ul {list-style:none;display:flex;position:relative;}
#nav ul li {width: 50px;display:inline-table;padding: 10px 20px;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li:hover > ul {display: block;position:absolute;margin-left:0px;width:100%;}
#nav ul li a{text-decoration:none;font-family:Verdana;color:#fff;}
#nav ul ul {display:none;}
#nav ul ul li {background: #008080;}

My issue is :

  • The dropdown in my CSS is not aligning correctly with the li element.

Is there anyone who can assist me?

htmlcss

Answer №1

Give this a shot, it appears that there was some extra "padding" on your submenu list

#nav ul li:hover > ul {
     display: block;
     position:absolute;
     left:0px;
     width:100%;
     padding-left:0px;
}

Answer №2

utilize negative margin values http://jsfiddle.net/5tz0zszy/

I have implemented some modifications in the CSS code

#nav {
background: #008080;
position:relative;
}
#nav ul {
list-style:none;
display:flex;
position:relative;
}
#nav ul li {
width: 50px;
display:inline-table;
padding: 10px 20px;
position:relative;
}
#nav ul li:hover {
background:#333;
}
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:-60px;width:100%;
}
#nav ul li a{
text-decoration:none;
font-family:Verdana;
color:#fff;
}
#nav ul ul {
display:none;
}
#nav ul ul li {
background: #008080;
}

Answer №3

REDEFINE YOUR STYLES 

*{box-sizing:border-box;padding:0; margin:0;}

apply padding to links instead of lists

VIEW DEMO

*{box-sizing:border-box;padding:0; margin:0;}
#nav {background: #008080;position:relative;}
#nav ul {display:flex;position:relative;}
#nav ul li {list-style:none;float:left;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li > ul {position:absolute;}
#nav ul li:hover > ul {display: block;}
#nav a{text-decoration:none;font-family:Verdana;color:#fff;display:block;clear:both;padding: 10px 20px;}
#nav ul ul {display:none;position: absolute;left: 0;}
#nav ul ul li {background: #008080;display:block;width:100%;}

Answer №4

Just insert the following:

#nav ul li:hover > ul {
    display: block;
    position:absolute;
    margin-left:0px;
    width:100%;
    left: 0;/*Include this*/
    padding: 0;/*Include this*/
    top: 40px;/*Include this*/
}

Make sure to update display: block in 

#nav ul li {width: 50px;display:block;padding: 10px 20px;position:relative;}
. Verify menu changes accordingly.

fiddle

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

PHP/HTML failing to upload extra large files

Allowing users to upload large files is causing an issue for me. I tested uploading a 22 MB file and it was successful. However, when I tried uploading a 200 MB file, it seems that the file does not enter the if block and instead returns the output from th ...

phpjqueryajaxhtml

Ion-footer positioned above keyboard

I have been struggling with a persistent issue and have attempted numerous solutions to resolve it, but the problem persists. When using the web app on Google browser with my phone, I encounter an issue where the footer overlaps with the keyboard. Has anyo ...

cssangularionic-framework

How to remove an item with a click using jQuery and PHP?

I have a question about deleting an item I just clicked on. I'm having trouble tracking it and resorting to drastic measures (like posting here) to delete everything in the list. Code Snippet: <div class="image-list"> <?php $count = 1; if ( ...

phpjqueryhtml

Utilize jQuery to arrange DIV elements according to their Grandchild DIVS

I've been searching through Stack for the past day and haven't come across a solution to this particular problem, despite finding similar ones. Here's the HTML code I'm currently working with: <div class="titles"> <div cla ...

jquerysortinghtml

Internet Explorer experiencing printing issues

Can anyone explain why IE (8,9 Tested) is refusing to print the right side of this coupon on the red background? The left side (phone number) prints fine. Other browsers like Chrome and Firefox print the whole document correctly. To see the bug, you can ...

cssinternet-explorerprinting

Height not being applied to DIV container

I'm facing an issue with my CSS code that is causing images to break the row after reaching the end of the DIV. However, the container behind it is not adjusting its height according to the images. The height should expand along with the images. Here ...

javascriptphpjqueryhtmlcss

When implementing $().html, certain impacts of mdui may fade away

I've been exploring the functionalities provided by mdui.org, specifically the panel feature. Initially, I had successfully integrated the codes into the HTML body with no issues. View the code here See the screen capture here This allowed me to to ...

javascriptjqueryhtmlcssfrontend

Leveraging keyboard input for authentication in Angular

Would it be possible to modify a button so that instead of just clicking on it, users could also enter a secret passphrase on the keyboard to navigate to the next page in Angular? For example, typing "nextpage" would take them to the next page. If you&apo ...

javascripthtmlangulartypescript

Utilizing LocalStorage for storing the most recent input value

Is there a way to set and retrieve the last input value using JavaScript or jQuery? I want to implement an onkeydown function for an input field that updates the input value, and then each time the page is loaded, that value is displayed. <input type ...

javascriptphphtmljquery

The $watch() function seems to be failing to properly refresh the $scope

Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...

javascripthtmlangularjsangularjs-service

Utilizing PHP to create header and footer with .htaccess

Instead of placing the header and footer before/after the <html> and <body> tags in every single page using the .htaccess file, is it possible to include the header right after the <body> tag and the footer right before the </body> ...

phphtml.htaccessinclude

Controlling the HTML5 dialog element within a React application

Struggling to implement a basic configuration dialog with a close icon in the top-right corner using React. In other frameworks, it's easy to show/hide a dialog with .showModal()/close(), but manipulating the DOM directly in React is not recommended. ...

javascripthtmlreactjs

Divide the full width into three divisions, each taking up 33% of the total width

I have been experimenting with using 3 divs to create a table-like layout with 3 columns. I set each div to occupy 33% of the width of the page, and it worked well until I tried to add padding to move the text away from the border. This caused the third di ...

htmlcss

Single input results in array output

I have a pair of items in this array list. $.each(data.recalls,function(i) { var recall = data.recalls[i].nnaId; var description = data.recalls[i].remedyDescription; console.log(recall); console.log(description); $('textarea[name= ...

javascripthtmlarrays

The JQuery condition is failing to accurately recognize the span checkbox

I am facing an issue with checking the status of a span checkbox to see if it is checked or not. For some reason, I believe that the detection of the checkbox's status is not working correctly. Below is a simplified version of my current code: ...

javascriptjqueryhtmlcheckbox

Safari browser is experiencing issues with the custom file upload script

My custom upload script allows users to easily select images for upload by clicking or dragging them into the designated box. A preview of the chosen image should appear, and this functionality works smoothly in Firefox and Chrome. However, I've encou ...

javascripthtmlcssfile-uploadinput

Is it possible to create an animation with CSS3 transitions?

Experience a dynamic blinking border animation when hovering over the title: #link_list a:hover { border-left: 10px solid #E3E3E3; animation: blink 1s infinite; -webkit-animation: blink 1s infinite; -moz-animation: blink 1s infinite; -o-animation: blink 1 ...

cssanimationcss-transitions

Can CSS be utilized to determine the present height of an element?

My attempt to align an element using a certain method has hit a snag when trying to retrieve the current height of the element using CSS. Below is the code that works, albeit with some extra parts: section{ margin-top:calc(50vh); margin-bottom:ca ...

htmlcss

ASP.NET ensures that the entire page is validated by the form

Is it possible to validate only a specific part of the form instead of the entire page? Currently, when I try to validate textboxes on the page, the validation is applied to all textboxes. Here are more details: https://i.stack.imgur.com/eowMh.png The c ...

javascriptc#htmlasp.net

Dissolve elements sequentially

I've set up an array to store the IDs of buttons, which are identified as #red, #green, #blue, and #yellow In addition, I've created a function that randomly selects a color and saves it in another array. My goal is to loop through the second a ...

javascripthtmljquerycss