What are some methods to customize the CSS subnavigation without changing the appearance of the main navigation

http://jsfiddle.net/uuyVY/

screenshot https://i.sstatic.net/CzUPk.png

I'm attempting to configure the subnav to be white and span the entire containing div (which is 1100px wide), with only the text links displayed vertically. However, I'm struggling to disable the background image for the subnav li element without affecting the main nav background image.


            ul#horiznav, #horiznav ul {
                /* Remove the bullets from the dropdown ul as well */
                margin: 0;
                padding: 0;
                list-style-type: none;
                height: 53px;
                font-size: 10px;
            }
            #horiznav li {
                float: left;
                width: 150px;
                position: relative;
                /* Set position:relative as the starting point for absolutely positioning the dropdown */
            }
            #horiznav li a {
                display: block;
                width: 150px;
                line-height: 30px;
                text-align: center;
                color: white;
                text-decoration: none;
            }
            ...
        
    

Answer №1

Is this similar to what you had in mind?

#verticalnav li:hover ul a
{
    background: grey;
    color: blue;
    background-image: url('images/background.jpg');
}

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

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

My goal is to show all textarea inputs in the browser even after a page refresh, as currently when I send data from homepage.php using jQuery/AJAX, it disappears upon refresh. The information is sent from homepage.php to data.php via the #textarea input an ...

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

Hide the scrollbar in MUI Grid, all while maintaining the ability to scroll seamlessly

I am attempting to achieve the same outcome as mentioned in this post, but within a MUI Grid container/item. However, I am facing an issue where I do not see a scrollbar and am unable to scroll. Could there be a problem with my implementation? Here is the ...

Is it possible to track keystrokes without the use of text input fields?

For various unimportant reasons, I need to use JavaScript to create links instead of using the anchor tag. I want the behavior to mimic the anchor tag, allowing users to open a link in a new tab when holding down the Ctrl key or in a new window when holdin ...

Can an advertisement's appearance be altered to include custom content using only CSS?

Dealing with SAP for our ticket system has been quite a challenge due to the design that is causing some frustration. In an attempt to make it more tolerable, I used CSS to make some adjustments. However, my problem now lies in the fact that they keep maki ...

Enhancing WordPress Menu Items with the 'data-hover' Attribute

Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...

What is the best way to choose a row from MYSQL database?

I am trying to access a user's information from my database using the following code: <?php $database="myweekdatabase"; $con = mysql_connect("localhost","root" ,"");//for wamp 3rd feild is balnk if (!$con) { die('Could not connect: ' . m ...

Exploring AngularJS: Implementing CSS media query for responsive screen resizing

I currently have a CSS code that triggers a message box through media query when the screen is resized to a specific size. I am looking for a way to make the message box disappear automatically after 5 seconds. Do you have any suggestions on how to achiev ...

Creating a Unique CSS Grid Border with Custom Images

I have a client project using nextjs and the design calls for a component with a custom border on a responsive CSS grid. I've successfully created the CSS grid with all the necessary content, but I'm struggling to add the required border as per t ...

Issues with footers in IE 10/11 and Edge when using Grid layout

In the latest versions of Chrome, Firefox, Opera, IE 10/11 and Edge, the Grid layout below works perfectly fine. The only issue is with the Microsoft browsers where the footer fails to start scrolling when the content exceeds the screen size, leaving it fi ...

What is the best way to create an animation for a dynamic menu background image

While hovering over a list item, I want to create an animation where the background image appears to zoom out. $(function () { var image = $('.menu').find('img').attr('src'); $('.menu ul li').mouseover(fun ...

What is the best method for extracting and storing search suggestions data with selenium?

Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...

Measuring the height of a div element using Vuejs

Let me explain my current situation: I am trying to determine the height of a DIV component in order to dynamically inform its child component about its size. I have been working on implementing manual loading mode, but I have encountered an issue where t ...

Trouble with Metro UI Library: CSS not loading properly

I am having trouble with the navbar CSS on my website while using the Metro UI CSS library. Check out my HTML code: <!DOCTYPE html> <html lang="en"> <head> <title>TelePrint Blog</title> <link rel="stylesheet" href= ...

Z-Index Problem with PureCSS Horizontal Scrollable Menu

I've been working on this issue but can't seem to get it right. I have a purecss menu with a horizontal scrollable feature, but the submenus at depth 1 and 2 don't appear on hover in Firefox and Safari - they are being hidden underneath. I ...

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

set ajax url dynamically according to the selected option value

My form features a select box with three distinct choices <select id="tool" name="tool"> <option value="option1">Option1</option> <option value="option2">Option2</option> <option value="option3">Option3</ ...

How to center an HTML header

Currently working on a one-page scrollable website, aiming to have the first page consist of a navbar, image, and header. The challenge I'm facing is centered around aligning the header vertically. Although I managed to center it horizontally, the ver ...

Having trouble with PHPmailer resulting in a 504 gateway timeout error

I keep receiving a 504 gateway timeout error from my server when using phpmyadmin to individually send emails to a list of approximately 1200 users. It is crucial for me that the emails are sent out one by one, as I want to avoid exposing any email addres ...

A guide on dynamically adjusting text size based on viewport width and height in React with TailwindCSS

Utilizing React and Tailwind, I am working towards creating two overlapping rectangles with text. The top rectangle's text should be aligned to the left, while the bottom rectangle's text should be aligned to the right. Regardless of window size ...