Glitch in CSS causing issues with drop-down menu

When hovering over the Gallery, the sub menu list displays next to each other, but I want Sub 1 and Sub 2 to display below each other as a dropdown. How can I improve this code and is there any unnecessary code in it?

Here is the picture:

HTML:

<div id="menu_wrapper">
<div id="menu">
    <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#" target="_parent">Gallery</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#" target="_parent">Plants</a></li>
        <li><a href="#" target="_parent">News</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>     

    </div> <!-- end of menu -->
</div><!-- end of menu_wrapper -->

CSS

    
/*
CSS
*/
#menu_wrapper {
    width: 100%;
    height: 80px;
    margin: 0 auto; 
    background: url(menu_bar.jpg) no-repeat center top;
}

#menu {
    width: 900px;
    height: 80px;
    margin: 0 auto;
    background: url(menu_bar.jpg) no-repeat center top; 
}

#menu ul {
    float: left;
    margin: 0px;
    padding: 30px 0 0 150px;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu ul li a {
    position: relative;
    float: left;
    display: block;
    width: 115px;
    height: 30px;
    padding: 5px 0 0 0;
    margin-right: 10px;
    text-align: center;
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    color: #eee901; 
    font-weight: bold;
    outline: none;
    background: url(menu_item.png) no-repeat;
}

#menu li a:hover, #menu li .current {
    color: #FFF;
}

#menu ul ul {
    display:none;
    position:absolute;
    text-align:left;
    float:left;
}
#nav ul ul li {
    display:block;
}

#menu ul li:hover ul {
    display:block;
}
#menu ul li:hover ul li{
    style:none;
}

Answer №1

It appears that your CSS is almost correct for achieving the desired behavior, but there seems to be a mistake in one of your CSS selectors.

Instead of:

#nav ul ul li {
    display:block;
}

You should use:

#menu ul ul li {
    display:block;
}

This adjustment changes the display:inline setting that you previously had, allowing the submenu items to stack as desired. Check out this JSFiddle for a demonstration. If you have any questions, feel free to ask!

As for code improvements, it seems that specifying float:left on your <ul> elements may not be necessary, depending on the broader context of your website.

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

Challenges with the grid system in Bootstrap version 5.3

Hello there, I am trying to craft the front end of my website using Bootstrap 5.3. However, I am encountering an issue with the grid system. It seems like the classes are not behaving as they should be. Below is the code I am using: <div class="co ...

What is causing the fluctuation in the width?

I am struggling to understand this portion of CSS code. When I resize the page, one button sometimes overlaps with the edit box. While debugging in Firebug, I noticed that the width is displayed as 0 for a container. Adding some width brings the button bac ...

Implement a vertical scrollbar when the page exceeds a specific height

I've been combing through Google for a solution with no luck. I'm dealing with absolute content positioning and I'm looking to implement a scrollbar only when the browser window reaches a certain size. This website is fullscreen, so I don&ap ...

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...

Images do not appear on Bootstrap Carousel as expected

I am facing an issue where the images are not displaying on my bootstrap carousel or when I try to display them individually using their class. I am utilizing bootstrap and express for my project. I have verified multiple times that the file path to the im ...

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

TinyMCE - Optimal Approach for Saving Changes: keyup vs onChange vs blur

In the context of my Filemaker file, I am utilizing the TinyMCE editor. My goal is to automatically save any changes made by the user, whether it's typing, applying formatting, inserting an image, or making any other modifications. I have a function ...

having difficulty setting up tabs using uib-tabset

I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...

Optimize your HTML with Meleze.web's ASP.NET MVC 3 Razor minification and compression features

I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...

Sending an HTML form to an external ASP script

I am currently attempting to create an HTML form that can submit multiple variables to an external ASP file that generates a chat window. The given example I am working with can be viewed through this link, although it involves a two-step process. In the ...

What could be causing this code to only modify one element instead of both?

One input field should be able to change two elements, however with jQuery it appears that only one element is being modified. When rearranging the order of elements in the function, such as having #inCoin first and then #receive_amount, only the #inCoin ...

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I have three elements named one, two, and three, declared as seen below: <div id =container> <div id 'one' class="element one"></div> <div id 'two' class="element two"></div> < ...

Tips for maintaining the selected radio button state after refreshing the JSP page: Ensuring that the radio button remains selected

I need help with refreshing a page after clicking on one of two radio buttons. I've tried multiple solutions but haven't been successful so far. Can someone assist me? <script> $(document).ready(function() { $(document).on('c ...

Filtering stop words in Python through HTML parsing using Beautiful Soup

I have developed a program that extracts specific information from a website and stores it in a file. Currently, the program scans a webpage, identifies the correct HTML tag, and extracts the relevant content. Now, I aim to refine these "results." For ins ...

Prevent the layout from shifting with CSS

I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...

Tips for styling buttons in react-admin with custom CSS

I need some help with customizing buttons in react-admin. I am new to the platform and unsure about how to go about changing the button CSS for various actions such as create, edit, and export. Can anyone provide guidance on the best way to customize these ...

"Exploring the technique of extracting substrings in JavaScript while excluding any symbols

I am working on a JavaScript web network project and I need to use the substring method. However, I want to exclude the colon symbol from the substring because it represents a hexadecimal IP address. I do not want to include colons as part of the result. H ...

Is there a way to horizontally align the content in my footer section?

I am currently exploring React Material UI for the first time. The table I am working with can be found here under the "Custom pagination actions" section. Within this section, there is footer content containing buttons for rows per page, next, previous, ...