My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly.

Here is the code snippet causing the problem:

/* STYLING FOR NAVIGATION MENU */ 
.nav-bar {
    width: 100%; 
    height: 80px; 
    background-image:url(../images/bg-menu80.jpg);
}

.nav-hold {
    overflow: hidden;
}

.nav-list {
    float: right;
}

.nav-list li {
    float: left; 
    width: auto; 
    position: relative;
}

.nav-list li a {
    text-decoration: none; 
    display:block; 
    padding: 30px 7px 20px 7px; 
    color: #f9f9f9; 
    font-size: .9em; 
    font-weight: bold;
}

.nav-list li ul {
    display: none;
}

.nav-list li a:hover {
    text-decoration: none; 
    display: block; 
    padding: 30px 7px 20px 7px; 
    color: #000; 
    font-size: .9em; 
    font-weight: bold; 
    background-color: #e7e4e4;
}

.nav-list li a:hover li{
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0;
}

.nav-list li a:hover li{
    float: left;
}

.nav-list li:hover li a{ 
    background-color: #333; 
    border-bottom: 1px solid #fff; 
    color: #FFF;
}

<ul class="nav-list" id="navigation"><!--Menu list-->
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li> <ul><a href="members.html">Members</a>
<li><a href="board.html">Board of Directors</a></li>
<li><a href="committee.html">Committee</a></li>
</ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="events.html">Events</a></li>
<li><a href="rules.html">Rules &amp; Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->
htmlcssdrop-down-menumenunav

Answer №1

When you directly paste your code into a jsfiddle, it may not show much activity as it is mainly used for testing HTML, CSS, and JS codes. Without a clear description of your expectations, there might be some guesswork involved in solving the issue.

I have identified 2 potential issues in your code.

The HTML Problem

Firstly, the <li> element containing the subnavigation <ul> has incorrect HTML structure. The link 

<a href="members.html">Members</a>
should precede the <ul>, not be nested inside it.

The corrected structure should resemble this:

<li>
    <a href="members.html">Members</a>
    <ul>
        <li><a href="board.html">Board of Directors</a>
        </li>
        <li><a href="committee.html">Committee</a>
        </li>
    </ul>
</li>

The CSS Issue

Secondly, you are attempting to display the subnavigation <ul> when hovering over the <a> tag. However, this action should trigger when hovering over the <li> element that contains the subnavigation.

The correct CSS styling should be as follows:

.nav-list li ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}
.nav-list li:hover ul {
    display: block;
}

I have made adjustments in this fiddle link to help guide you towards the right solution.

http://jsfiddle.net/davidpauljunior/ve9Ub/

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

Set the default value for a form control in a select dropdown using Angular

I've been struggling to figure out how to mark an option as selected in my select element, but I haven't had any luck. I've tried multiple solutions from the internet, but none of them seem to be working for me. Does anyone out there have ...

htmlangulartypescript

Issues with IE9's CSS hover functionality are causing problems

This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work a ...

htmlcssinternet-explorer-9

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

I am attempting to override the CSS of Muidrawer-paper. It works locally after running "npm start", but it does not take effect when building the package. .css-12i7wg6-MuiPaper-root-MuiDrawer-paper { position: absolute !important; top: 50px !import ...

cssreactjsmaterial-ui

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

jquerycss

Unable to display the absolute path of the image src in WebStorm

Hey there! I recently started learning HTML5 and have been using WebStorm on my trusty Macbook Air for about two weeks now. I've encountered a problem with image sourcing that has left me puzzled. Here's my question: Why is it that images from ...

csshtmlimagewebstormsrc

What is the process for adding text before and after a Bootstrap progress bar?

I want to customize the bootstrap progress bar with text at the beginning and end, like this: 5 star ----------------------------------------------- 70% Here is my attempt to achieve this: <link rel="stylesheet" href="https ...

csstwitter-bootstrapbootstrap-4

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

What is the priority of the asset pipeline's execution order?

What is the priority of asset pipeline? I am trying to replace a part of ace.css style with user.css.scss. The stylesheet file ace.css in the vendor folder should be overridden by user.css.scss. However, it did not work as expected even when I included ...

cssruby-on-railsasset-pipelineturbolinks

Is there a way to conceal the contents of a page until all the images have finished loading?

I'm currently working on improving the performance of a website that is loading very slowly. I have already reorganized, compressed and minified the JavaScript and CSS files, but the main issue seems to be with the images. The site contains large imag ...

javascripthtml

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

Opera fails to recognize background hover transitions on links

One of my web design projects includes a transition that creates a rounded background that fades in when links are hovered over. Unfortunately, the transition doesn't seem to work properly in Opera, even though it functions well in Firefox, Chrome, an ...

htmlcsscss-transitions

Establish the minimum and maximum values for the text field depending on the selection made in the previous dropdown menu

For my project, I need to create a dropdown menu and a text box positioned next to it. I want the text box to have specific character limits based on the option selected from the dropdown. For example, if "Option 1" is chosen, then the textbox should only ...

javascriptjqueryhtmlcss

inefficient performance in linking function within the visual aspect

I am working on an Ionic 4 with Angular app, where I have implemented websockets in my ComponentA. In ComponentA.html: <div *ngFor="let item of myList"> <div>{{ item.name }}</div> <div>{{ calcPrice(item.price) }}</div> ...

htmlangularperformanceionic4

Generate an image of a "button" with dynamic hover text

I am trying to create a clickable image with dynamically changing text overlaid on it. I have the PHP code that retrieves the necessary information for the text, but I am struggling to create the button as I am new to this type of task. Here is an example ...

phpjavascripthtmlcss

Create a feature that allows users to dynamically add and remove image fields, with the ability to insert the selected images into a database

I'm currently using the following code and I am able to add attachments, but I'm facing an issue when trying to remove them. Can someone please help me with this problem? I tried adding an alert on the remove button and it seems to be working, h ...

phphtmljquerymysql

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Take a look at the screenshot below - what you see on the left side is my current setup, while on the right side is the desired outcome achieved without any plugins or HTML5 attributes The left side scenario occurs when I have 2 input fields - one with th ...

javascriptjqueryhtmlcss

Eliminating pre-set CSS styles injected in Angular 2/Ionic 2 automatically

I'm encountering an issue where adding the ionic 2 gesture (press) to a button results in inline styles being automatically applied to that button. Is there a way to override the styles it adds? Button <button ion-button (press)="toggleFavourite ...

htmlcssangulartypescriptionic2

Click on another part of the page to reveal a dropdown menu

I am seeking a way to trigger the opening of this dropdown select not by directly clicking on its position, but rather by clicking on another <span>. Displayed below is the dropdown menu: <div class="styled-select"> <span id="camDurati ...

javascriptjqueryhtmlcssdrop-down-menu

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

I attempted to create a new route for my educational website, and it works when the route is set as '/', but when I try to link to the 'about' page, it displays an error saying 'Cannot Get /about' Here is the code from app.js ...

javascripthtmlnode.jsexpressweb-applications