CSS active state not functioning properly

While working with asp.net4.0, I am attempting to create a menu bar using CSS. Everything seems to be working fine except for the 'active' code, which doesn't seem to be responding as expected. Any insights into why this might be happening?

CSS Code 

    #main-nav{
        height:29px;
        float:left;
        background-image:url(images/nav-bg.gif);
        background-repeat:repeat-x;
        background-position:top left;
        width:100%;
    }

    #main-nav ul,
    #main-nav li{
        padding:0px;
        margin:0px;
        list-style-type:none;
    }

    #main-nav ul{
        height:29px;
        line-height:29px;
        background-image:url(images/nav-bar.gif);
        background-position:right;
        background-repeat:no-repeat;
        float:left;
        padding:0px 1px 0px 0px;
        margin:0px 0px 0px 10px;
    }

    #main-nav li{
        height:29px;
        line-height:29px;
        display:inline;
        position:relative;
        float:left;
        width:80px;
        text-align:center;
    }

    #main-nav li a{
        height:29px;
        width:80px;
        text-align:center;
        float:left;
        background-image:url(images/nav-bar.gif);
        background-position:left;
        background-repeat:no-repeat;
    }

    #main-nav li a:link,
    #main-nav li a:visited{
        color:#FFFFFF;
        text-decoration:none;
    }

    #main-nav li active{
        background-image:url(images/active.gif);
        background-repeat:no-repeat;
        background-position:left;
    }
    #main-nav li a:hover{
        background-image:url(images/active.gif);
        background-repeat:no-repeat;
        background-position:left;
    }

Updated CSS file

#main-nav{
    height:29px;
    float:left;
    background-image:url(images/nav-bg.gif);
    background-repeat:repeat-x;
    background-position:top left;
    width:100%;
}

#main-nav ul,
#main-nav li{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

#main-nav ul{
    height:29px;
    line-height:29px;
    background-image:url(images/nav-bar.gif);
    background-position:right;
    background-repeat:no-repeat;
    float:left;
    padding:0px 1px 0px 0px;
    margin:0px 0px 0px 10px;
}

#main-nav li{
    height:29px;
    line-height:29px;
    display:inline;
    position:relative;
    float:left;
    width:80px;
    text-align:center;
}

#main-nav li a{
    height:29px;
    width:80px;
    text-align:center;
    float:left;
    background-image:url(images/nav-bar.gif);
    background-position:left;
    background-repeat:no-repeat;
}

#main-nav li a:link,
#main-nav li a:visited{
    color:#FFFFFF;
    text-decoration:none;
}

#main-nav li a:active ,#main-nav li a:focus 
{
    color:Aqua;
    background-image:url(images/active.gif);
    background-repeat:no-repeat;
    background-position:left;
}

#main-nav li a:hover{
    background-image:url(images/active.gif);
    background-repeat:no-repeat;
    background-position:left;
}
css

Answer №1

There is currently no activated tag available. Please update it to:

#nav-container li a:activated {
    background-image: url(images/activated.gif);
    background-repeat: no-repeat;
    background-position: center;
}

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

Tips for emphasizing v-list-item on click (Vue)

I am currently working on a side menu that changes based on the selected router model. My goal is to have the selected page highlighted when clicked. I would like this functionality for all the submenus as demonstrated in this example. Below are snippets ...

javascripthtmlcssvue.jsuser-interface

Content overflowing beyond the boundaries of the parent DIV in Internet Explorer 6

Take a look at the code snippet below: <div style="width: 50px; border: 1px solid green;"> <div style="position: absolute;"> add whatever text you'd like </div> </div> The display in modern browsers (such as I ...

htmlcssinternet-explorer-6

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

cssreactjsmaterial-ui

What is the best way to ensure all table rows have consistent heights that are not affected by image sizes?

In the provided code snippet, you will notice that the height of the table rows varies slightly based on the height of the images. Currently, the image tags are set to height: auto;, and changing it to 300px would make all images the same size, however, m ...

css

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...

javascriptcssiconspngcss-sprites

Leveraging the power of animate.css library to enhance page transitions on Nuxt

I've been working on implementing the animate.css library for nuxt page transitions, but I'm encountering some issues. I have successfully added animate.css to the nuxt.config.js file and it loads without any problems. However, when I try to use ...

cssvue.jsnuxt.js

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...

c#asp.netcssgridviewscroll

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

What steps should I follow to make a section stay in place on swipepages?

Looking for help to create a sticky section similar to the one on (mobile version). I want to replicate this section with 2 buttons on swipepages.com but I'm not sure about the custom CSS and HTML needed to achieve this. Any assistance would be appre ...

htmlcssstickysticky-footer

The CSS3 feature is not compatible with the Android browser, causing issues with loading responsive CSS

Currently, I am conducting testing on my website across various mobile devices. So far, the site functions perfectly on iOS devices but encounters issues when viewed on Android devices - it appears zoomed in and fails to be responsive. Within the <head ...

androidioscss

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

htmlcss

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

My attempts to use `this.scrollIntoView({behavior: "smooth"}) were yielding inconsistent results in terms of where the selected item would land on the page. I believe I might need to utilize scrollTop(), but as someone who is new to jQuery, I am ...

javascripthtmljquerycssscroll

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

javascriptjqueryhtmlcssanimation

Issues with Adaptive Headers

* { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { font-size: 14px; } header { width: 100vw; height: 50px; background-color: #222; margin: 0 auto; padding: 0; display: flex; justify-content: ...

htmlcssflexbox

Keep track of the toggled state and prevent any flickering when the page is reloaded, all without the

After extensive searching, I couldn't find exactly what I needed. Therefore, I decided to utilize cookies to remember the toggled state of a div whether it's hidden or visible. However, I encountered an issue where there is flicker happening as t ...

javascriptjqueryhtmlcssfrontend

How can I create a layout with cards that are arranged differently on wide screens compared to mobile using bootstrap?

Having trouble with my bootstrap 5.x layout. Can anyone help me achieve a design where the cards display like the left image on desktop/wide screens and like the right image on smaller width mobile screens? I currently have the mobile view showing A-B-C-D- ...

csstwitter-bootstrapbootstrap-5

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

After spending a week learning frontend designs, I attempted to replicate a design from Dribble. However, I've been struggling with recreating the active style on the sidebar due to the outward curve. If anyone could provide guidance on achieving thi ...

htmlcssuser-interfaceuser-experience

Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

Incorporating a custom _variables.scss file into my codebase is crucial for my project, and the way I import it is as follows: @import url('https://fonts.googleapis.com/css?family=Nunito'); @import 'variables'; @import 'bootstrap/s ...

csscolorsalertbootstrap-5

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. https://i.sstatic.net/cTY2w.png So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I ...

cssangulartreeangular-material

The 'refresh' function in jQM listview is causing issues with inset lists

For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements t ...

jqueryhtmlcssjquery-mobile