Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS active not working
    text
    copied!<p>I am using asp.net4.0 and trying to create a menu bar through the use of CSS, When i am running the program the hove and the click work but the active code doesnt any idea why this is happening</p> <p><strong>CSS Code</strong> </p> <pre><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; } </code></pre> <p><strong>Updated CSS file</strong></p> <pre><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 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; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload