Issue with the styling of the fourth level menu option persists

I'm stuck trying to style the fourth level and can't figure out why. Would really appreciate some help untangling this CSS mess!

Check out the Fiddler: Menu Demo

Answer №1

There are a couple of issues that need to be addressed here. Firstly, it is highly recommended that you tidy up your CSS and validate your HTML.

Your CSS contains errors which are contributing to the problem:

.nav ul li li li:hover a {
background:#00999b url(img/arrow_over.gif) no-repeat 95% 9px !important; 
} 

In addition, your HTML has invalid elements with unclosed tags nested within other tags:

<ul>
            <li class="canieti first"><a href="#"><span>***HOME</span></a><ul>
            <li class="quienessomos first"><a href="#"><span>***SECOND</span></a><ul>
            <li class="consejodirectivonacional"><a href="#"><span>***THIRD</span></a><ul>
            <li class="mesadirectivanacional first"><a href="#"><span>***FOURTH</span></a></li>
         </ul>

            <div style="clear: both;"></div>
        </li>
        <li class="canieti first"><a href="#"><span>Other</span></a></li>
        </ul>
        <div style="clear: both;"></div>
        </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

What is the most effective method for transitioning between states in Angular when it comes to modifying the HTML display?

When faced with the decision of choosing between two different approaches for managing component view during loading, the "best way" refers to performance and minimizing UI blinking (reducing DOM renderizations). Approach 1: Utilize a loading variable to ...

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

Tips for preventing the larger background from displaying a scroll on a web page

Specifically tailored for this specific page: I am looking to eliminate the scrollbar at the bottom of the browser, similar to how it appears on this page: Thank you ...

Could you please clarify the specific functionality of this script?

I've been trying to figure out the communication process between (a website that tracks real-time changes in Roblox's catalog and updates the client) and I came across this script while inspecting the site. It seems like this script is responsib ...

Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

After years of success with my floated left and right divs, I am now facing a challenge with responsive design. No longer able to rely on fixed widths, I find that when the screen size decreases, the right div moves below the left one. I know that using f ...

Error Message: Unhandled TypeError - Unable to access property 'setState' as it is null in React

Encountering an issue on my React page where I receive the error: Uncaught TypeError: Cannot read property 'setState' of null specifically when trying to use the counter component. The problem seems to originate from the usage of this inside th ...

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

Why isn't my jQuery code functioning properly on Weebly?

Hello, I'm a beginner in coding and have very limited skills in this area. However, I am able to install scripts on my Weebly site and have been doing so for some time now. Even though I can't code, I've managed to learn a few things along t ...

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

What is the meaning of dp (density-independent pixels) units in CSS?

Many developers recommend using dp (density independent pixels) measurements for UI elements in Android development. However, when creating a web application instead of an Android app, conforming to these standards can be challenging due to the limitations ...

Text input field that adjusts its width based on content and remains

I am attempting to design a div that contains a fluid-width textarea. The div should have a width of at least 3em, maximum of 12em, and adjust accordingly to the width of the textarea. I have successfully implemented this. Check out the fiddle. However, w ...

Resolving the issue: "Unable to destructure the 'Title' property of 'fac' as it is undefined" in React JS

I'm facing an issue with react-bootstrap mapping in my component whereby I encounter the following error: Cannot destructure property 'Title' of 'fac' as it is undefined. It seems like there's an error when trying to de ...

Setting up a ClientBundle in GWT with multiple CssResources

I am currently in the process of updating some older code to GWT 2 and encountering some strange behavior. I have a custom interface that extends ClientBundle, as recommended by the GWT documentation. Within this bundle, I have defined multiple CssResource ...

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

Issues encountered when trying to use nested CSS styling in conjunction with asp.net controls

When trying to apply an internal stylesheet to an aspx page, the challenge arises when the style code is structured in a nested manner like this...... <style type="text/css> .formStyle{ } .formStyle ul{ //some style; } .formStyle ul li{ //some s ...

Personalize Autocomplete CSS based on the TextField input in React Material UI when a value is present

In my current project, I am utilizing React Material Autocomplete fields, which includes a nested TextField. I have successfully implemented standard styles for when the field is empty and only the label is visible, as well as different styles for hover ef ...

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

Utilizing Partial Views in Hogan.js

Just starting out with Node.js and I have a question. Is there a way to use a single layout for HTML, like shared views and Master Layouts in MVC and ASP, respectively? For example: //. hello_world.hjs <!DOCTYPE html> <html> <head> ...

Efficient method for populating a table dynamically with JSON data using JavaScript

While experimenting with jQuery, JSON, and other technologies, I encountered a task where I needed to retrieve table data in JSON format from a loader script on the server and populate my table with it. Currently, I am using code similar to the following s ...

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...