2 replies [Last post]
Dinamicor
Dinamicor's picture
Offline
newbie
Ecuador
Last seen: 11 years 7 weeks ago
Ecuador
Timezone: GMT-5
Joined: 2009-12-20
Posts: 6
Points: 11

Hello:

I tweaked a CSS menu developed by Stu Nicholls.

Works fine, but lacks a feature: a:active does not work on it.

Tried many know (by me) possible combinations, but still doesn´t work. I will put the code. Please note that the UNWORKING CODE is highlited.

Please any advice welcome. Thanks.

/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at <a href="http://www.cssplay.co.uk/menus/final_drop.html
Copyright" rel="nofollow">http://www.cssplay.co.uk/menus/final_drop.html
Copyright</a> (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
.menu {width:155px; height:28px; position:relative; padding-top:1px; z-index:10000;font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:155px; w\idth:155px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:15px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:155px;position:relative;}
 
/* style the links for the top level */
.menu a, .menu a:link {display:block;font-size:12px;text-decoration:none; color:#ffa500; width:155px;
 height:28px; padding-left:5px; line-height:28px; font-weight:bold;padding-top:1px;background:#00006e url(images/azul1.png) repeat-x;}
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#FFF; width:155px;
 height:28px; padding-left:5px; line-height:28px; font-weight:bold;padding-top:1px;background:#00006e url(images/gradient.jpg) repeat-x;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:155px; w\idth:155px;}
 
<strong>/* UNWORKING CODE */
.menu a, .menu a:active {display:block;font-size:12px;text-decoration:none; color:#ffa500; width:155px;
 height:28px; padding-left:5px; line-height:28px; font-weight:bold;padding-top:1px;background:#00006e url(images/azul1.png) repeat-x;}
</strong>
 
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {color:#fff; background:#00006e url(images/azul.png) repeat-x; padding-right:0px; font-size:12px;}
/* style the second level hover */
.menu ul ul a.drop:hover{color:#fff; background:#00006e url(images/azul.png) repeat-x; padding-right:0px; font-size:12px;}
.menu ul ul :hover > a.drop {color:#fff; background:#00006e url(images/azul.png) repeat-x; padding-right:0px; font-size:12px;}
 
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {color:#fff; background:#00006e url(images/gradient.jpg) repeat-x; padding-right:0px; font-size:12px;}
/* style the third level hover */
.menu ul ul ul a:hover {color:#ffa500; background:#00006e url(images/azul.png);font-size:12px}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:28px;top:0px;left:145px; width:155px;padding-left:15px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:0px;t\op:0px;}
 
/* position the third level flyout menu */
.menu ul ul ul{left:145px; top:0px; width:155px;}
 
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-155px;}
 
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
 
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {color:#fff; background:#00006e url(images/gradient.jpg) repeat-x; padding-right:0px; font-size:12px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:155px;w\idth:155px;}
 
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#ffa500; background:#00006e url(images/azul.png);}
.menu :hover > a, .menu ul ul :hover > a {color:#ffa500; background:#00006e url(images/azul.png);}
 
 
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:visible;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

davestone
davestone's picture
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT-7
Joined: 2009-05-11
Posts: 74
Points: 43

Link please.

Link please.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 10 years 24 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

This may be off the mark but

This may be off the mark but what is it you think a:active does? It's not going to highlight the current page for you, its that split second while the link is being activated (taking you to the desired location).