Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfectly:

https://i.sstatic.net/vOrjD.jpg

<nav id="main-nav" class="main-nav">
               <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Dropdown &darr; </a>
                         <ul id="sublist">
                              <li><a href="#">Tomorrow</a></li>
                              <li><a href="#">Doomoro</a></li>
                         </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
               </ul>
          </nav>

css:

nav ul li a {
font-family:'Cookie', cursive;
background-color:#400000 ;

border-radius: 0.5em;
color:#fff;
display:block;
line-height:3em;
text-align:center;
text-decoration:none;
width:100%;
}

nav ul li a:hover {
    background-color:#680000 ;
    color:white;
}

nav ul li ul {
    display: none;
    position: absolute;
    top: 48px;

}

nav ul li:hover ul {
  display: block;
  position: absolute;
  opacity: 1;

}
nav ul li:hover li {
    float: none;
}

#sublist li a {
    font-family:'Cookie', cursive;
    background-color:#400000 ;

    border-radius: 0.3em;
    color:#fff;
    display:block;
    line-height:3em;
    text-align:center;
    text-decoration:none;
    width:100%;
}

Clarifications: The 'a' element is the smaller one. Thank you for any assistance provided.

htmlcss

Answer №1

For a solution to your issue, I recommend checking out this jsFiddle. Your CSS was missing a few key elements, which I have included in the updated code below while keeping the HTML unchanged:

#main-nav ul li {
    display: inline-block;
}
ul#sublist li {
    display: block;
}
ul#sublist {
    padding-left: 6px;
    top: 84px;
}
nav ul li a {
    font-family:'Cookie', cursive;
    background-color:#400000;
    padding: 10px;
    border-radius: 0.5em;
    color:#fff;
    display:block;
    line-height:3em;
    text-align:center;
    text-decoration:none;
    width:100%;
}
nav ul li a:hover {
    background-color:#680000;
    color:white;
}
nav ul li ul {
    display: none;
    position: absolute;
    top: 48px;
}
nav ul li:hover ul {
    display: block;
    position: absolute;
    opacity: 1;
}
nav ul li:hover li {
    float: none;
}
#sublist li a {
    font-family:'Cookie', cursive;
    background-color:#400000;
    border-radius: 0.3em;
    color:#fff;
    display:block;
    line-height:3em;
    text-align:center;
    text-decoration:none;
    width:100%;
}

Answer №2

Remember to reset your styles by utilizing CSS box-sizing to eliminate padding and margin values, then specify the left position for the ul ul element

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

DEMO


*{
    box-sizing:border-box;
    padding:0; 
    margin:0
}
nav{
    position:relative;
}
nav ul{
    max-width:480px;
    margin:40px auto;
}
nav li{
    list-style:none; 
    float:left;
    position:relative;
}
nav ul li a {
    font-family:'Cookie', cursive;
    background-color:#400000 ;
    border-radius: 0.5em;
    color:#fff;
    display:block;
    line-height:3em;
    text-align:center;
    text-decoration:none;
    padding:6px 12px;
}

nav ul li a:hover {
    background-color:#680000 ;
    color:white;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 20px;
    left:0;
}

nav ul li:hover ul {
    display: block;
    position: absolute;
    opacity: 1;
}

nav ul li:hover li {
    float: none;
}

#sublist li a {
    font-family:'Cookie', cursive;
    background-color:#400000 ;
    border-radius: 0.3em;
    color:#fff;
    display:block;
    line-height:3em;    
    text-align:center;
    text-decoration:none;  
    width:100%;
}

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

The correct way to use the useState hook for implementing an icon in React

My attempt at implementing a feature in React allows users to see active feedback on the screen by changing its icon when clicked. How can I make it change to another icon (e.g. from Box to BoxChecked) once it is clicked? Note: I believe this code line i ...

htmlreactjsreact-hooksreact-icons

Move and place multimedia items using IE's drag and drop feature

Is there a way to enable the drag and drop feature across different browsers or windows using HTML5's native DnD API? I have noticed that when I set the data type to 'text' in Internet Explorer, it functions properly. However, if I attempt t ...

javascripthtmlfirefoxdrag-and-dropinternet-explorer-10

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

jquerycsscookies

When an image is loaded, use Jquery to automatically open a new tab, instead of

I need to implement a function where, on loading an image on a page, a new tab opens and starts downloading a file from a specific URL while keeping the original page open. This task is part of a WordPress site with a jQuery section in the backend. I' ...

javascriptjqueryhtmlwordpress

Changing HTML5 input type date into a string representation

Here is my PHP code snippet: <?php include 'config.php'; if(isset($_POST['submitbtn'])){ $date = $_POST['datefield']; $newDate = date("Y-m-d", strtotime($date)); $result = mysql_query("Call seat(".$newDate.")"); if($resu ...

phpmysqlhtmlstored-procedures

Triangle-shaped image mapping and interactive hover effects

I am attempting to create a simple hover effect using two triangles. One triangle should start below the other, and upon hovering, it should appear above the first triangle. The problem I am encountering is that the surrounding boxes are obstructing the e ...

jqueryhtmlcssimagemap

Can you explain the purpose of a <div> element that is empty except for the CSS property clear:both?

Can anyone shed light on the significance of this particular tag that I stumbled upon in a legitimate html document that I recently acquired? <div style="clear: both;">&nbsp;</div> I appreciate any assistance you can offer. ...

htmlcss

What is the reason behind Bootstrap's size classes becoming ineffective after 5?

Consider this: <div class="container m-5"> is effective, while <div class="container m-9"> does not produce the desired result. It appears that any number greater than 5 does not function as expected. What could be the rea ...

csstwitter-bootstrap

Customizing the Background of an Input Box

How can I create an input box with a specific background? I have tried the following code but it's not displaying properly. What is the correct way to achieve this? In addition, I need to create variations of this button as described below: I wa ...

cssformslayoutinput

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

htmlcss

Error encountered during file upload - file field :input not found

I'm dealing with some HTML that looks like this: <div id="promocodesUpload"> <div class="qq-uploader"> <div class="qq-upload-drop-area" style="display: none;"> <span>Drop </span> </div> <a class=" ...

htmlfile-uploadcapybaraselectorvisible

Having difficulty assigning the $_Session value in the captcha file

I'm having trouble assigning a value to $_Session in a captcha file. Below is the code for my captcha file: <?php session_name('U'); session_start(); session_regenerate_id(); ini_set('session.cookie_httponly',true); $string=&a ...

phpajaxhtmlsession

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

javascripthtmlcss

What is the best way to include a validation process for Login Details in case of errors

Is it possible to implement Login Details confirmation for incorrect entries? My desired outcome is that when a user enters their credentials and the userID and Password are correct, but the user type is wrong, upon clicking the login button it should di ...

phphtml

Expanding the width of a Datatables within a Bootstrap modal

While working on my modal, I encountered an issue with the width of Datatables. Despite trying to adjust it to fit the modal size, it appears like this: https://i.sstatic.net/bLvIJ.png Below is the jQuery code calling the Datatables: function retrieveTa ...

javascriptjqueryhtmltwitter-bootstrapdatatables

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side. <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' r ...

htmlcss

Is there a way for me to manipulate the RGB values of the canvas in such a manner that the Red and Green components of the gradient are determined by dividing the position of my mouse cursor

My homework assignment requires using RGB colors where the red value is set to 0, green is the x-coordinate divided by 2, and blue is the y-coordinate divided by 2. I've been trying to control the colors on a canvas using addColorStop functions, but I ...

javascripthtmlcanvas

Struggling to create a CSS dropdown menu where the dropdown items refuse to align to the left

I am currently working on creating a dropdown menu to reveal hidden elements on mobile devices such as smartphones. However, I am facing an issue where the child elements of the dropdown menu are appearing to the right of the parent element instead of the ...

htmlcssdrop-down-menucascadingdropdown

Having trouble displaying background images on GitHub pages?

I have encountered an issue with images not displaying correctly on GitHub Pages, despite trying various solutions suggested in previous posts. Strangely, the page functions perfectly on my local machine and on Netlify, but on GitHub Pages all the images a ...

cssgithub-pages