Wed, 2010-03-10 22:33
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;}
Sat, 2010-03-13 21:58
#1
Link please.
Link please.
Sun, 2010-03-14 00:16
#2
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).

