Issues with functionality of drop-down menu

For some reason, when I hover over the menu item "support," the text doesn't show up in the drop-down menu. I've double-checked my CSS multiple times, but I can't seem to pinpoint where the issue lies.

HTML Code

<body>
<div class="site_header">   
    <div class="header_container">              
            <div class="header_logo">                   
            </div>
                <nav>
                    <ul class="header_menu">

                        <li><a href="#">Home</a></li>
                        <li><a href="#">Support</a>         
                            <ul class="header_sub_menu">
                                <li><a href="#">Lorum ipsum</a></li>
                                <li><a href="#">Anime</a></li>
                                <li><a href="#">Gundam Seed</a></li>
                                <li><a href="#">Fairytail</a></li>
                            </ul>                       
                        </li>
                        <li><a href="#">Forums</a></li>                         
                        <li><a href="#">Ask Question</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Feedback</a></li>
                    </ul>                   
                </nav>      
    </div>              
</div>  

CSS Code

body {

line-height:    1;
background-color:   brown;
font-family:    Century Gothic;
}

ol, ul {

    list-style: none; 
}

.site_header{ background-color: black; height:  50px; position: relative; }

.header_container{

    height: 50px;
    width:  1100px;
    margin-left:  auto;
    margin-right: auto;
    position:     relative;
}

.header_menu {

    left:   90px;
    position:   relative;
    cursor: pointer;
}

li a {

    color:  #f2f2f2;
    display:    inline;
    float:  left;   
    padding:    12px 10px 22px 11px;
    margin: 0px 0px 0px 6px;
    font-size:  0.831em;
    text-decoration:    none;
}

li a:visited{

    color:  #f2f2f2;
}

ul li a:hover {

    background-color: #dadada;
    color:   black;
}


ul li ul{

    display:    none;
}

ul li:hover ul{

    display:    block;
    position:   absolute;
    color:  green;
}

ul li:hover ul li a{

    background-color:   #f2f2f2;
    color:  red;
    display:    block;
    width:  200px;  
}

ul li:hover ul li a:hover {

    background-color:   #989898;
}

Answer №1

Take a look at this fragment:

<ul class="header_sub_menu">
    <li><a href="#"></a>Lorum ipsum</li>
    <li><a href="#"></a>Anime</li>
    <li><a href="#"></a>Gundam Seed</li>
    <li><a href="#"></a>Fairytail</li>
</ul>

It seems like you intended this:

<ul class="header_sub_menu">
    <li><a href="#">Lorum ipsum</a></li>
    <li><a href="#">Anime</a></li>
    <li><a href="#">Gundam Seed</a></li>
    <li><a href="#">Fairytail</a></li>
</ul>

Answer №2

The issue lies within the HTML, not the CSS. The anchor tags of the sub menu are placed outside the 'a' tag and directly under the 'li' tag. Fixing this structure should resolve the error.

Check out the fiddle provided below:

http://jsfiddle.net/E4G3Z/

Here is the corrected code snippet:

<div class="site_header">   
<div class="header_container">              
    <div class="header_logo">                   
    </div>
        <nav>
            <ul class="header_menu">

                <li><a href="#">Home</a></li>
                <li><a href="#">Support</a>         
                    <ul class="header_sub_menu">
                        <li><a href="#">Lorum ipsum</a></li>
                        <li><a href="#">Anime</a></li>
                        <li><a href="#">Gundam Seed</a></li>
                        <li><a href="#">Fairytail</a></li>
                    </ul>                       
                </li>
                <li><a href="#">Forums</a></li>                         
                <li><a href="#">Ask Question</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>                   
        </nav>      
    </div>              
</div>

Replace your code with the corrected version below:

<ul class="header_sub_menu">
   <li><a href="#"></a>Lorum ipsum</li>
    <li><a href="#"></a>Anime</li>
     <li><a href="#"></a>Gundam Seed</li>
      <li><a href="#"></a>Fairytail</li>
 </ul>

Replace the above code with the corrected version:

<ul class="header_sub_menu">
     <li><a href="#">Lorum ipsum</a></li>
     <li><a href="#">Anime</a></li>
     <li><a href="#">Gundam Seed</a></li>
     <li><a href="#">Fairytail</a></li>
  </ul>       

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

CSS: Containers displayed side by side when screen width is above a certain threshold, otherwise stacked on top of each other

I am trying to make two containers responsive without using media queries or JavaScript. When the screen size is 500px or less, I want the containers to stack on top of each other and take up 100% of the screen width. But when the screen size exceeds 500 ...

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

Troubles encountered in retrieving values from various <select>/<option> elements

Having some trouble with the code below. I am attempting to retrieve the values of the selected options from my layout_select2. Currently, when I select 'multi_select' and then an option from 'layout_select2', I end up with the first v ...

Looking to create a custom loader that adapts to different screen sizes

Can anyone help me make the text in my centered div responsive on my website loader? I'm new to coding and struggling to figure it out. Any assistance would be greatly appreciated! Make sure to view the full page snippet so you can see the text prope ...

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

Deleting various classes (jQuery)

Is there a more effective alternative to rewriting the following code snippet? $('element').removeClass('class1').removeClass('class2'); I am unable to utilize removeClass(); because it would eliminate ALL classes, and that ...

CSS Duo-Toned Background

I've been searching everywhere for a solution to this issue. I have a design that I'm attempting to code using divs and CSS. The top half of the image features a gradient that transitions from left to right with different colors. My struggle lies ...

What is the best way to vertically align a two-line nav item?

I am looking to design a navigation menu with items that can accommodate one or two lines of text. https://i.sstatic.net/nkxRL.png The items should have consistent height and the text should be vertically centered. Additionally, I want the entire box to ...

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

Step-by-step guide on applying a universal CSS class to every component within an application

I am in the process of building a multilingual react application and I am looking for a solution to dynamically apply certain CSS styles to most components based on the chosen language. I am seeking something akin to direction-rtl and direction-ltr, whic ...

Issue with React rendering numbers without displaying div

In my user interface, I am attempting to display each box with a 1-second delay (Box1 after 1 second, Box2 after another 1 second, and so on). https://i.sstatic.net/FdTkY.png However, instead of the desired result, I am seeing something different: https ...

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

Having trouble getting the CSS URL to work when using a leading slash?

I am attempting to utilize a background-image with a "root-relative" path like this: background-image: url("/img/bg.jpg");. In Chrome, the property is showing correctly but the image does not appear. When I change it to http://localhost:8080/img/bg.jpg, t ...

Loading Images in Advance with jQuery, Native JavaScript, and CSS

After successfully implementing a method to hover on a small image and load an additional image to the right side of the page, I am now looking to enhance user experience by preloading images. Is there a way to preload an image using JQuery, allowing it t ...

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Currently, I am working on a University Project that involves creating a selection function for drawn shapes such as rectangles, circles, lines, or triangles. The challenge lies in figuring out the visualization of the selection when a shape is clicked. T ...