By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,304 Members | 3,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,304 IT Pros & Developers. It's quick & easy.

Need help with :active state

victorduwon
P: 32
Hi Folks,
i have a list based navigation menu with two tiers of navigation. The second tier displays when the tabs on the first tier are hovered over. The problem I have is that when the tabs are clicked on the second tier dissapears. I need the second tier for the active tab to remain visible and the background of the tab to remain visible when the tab is clicked/active. Someone please help me, this is driving me crazy. Below is the CSS.

Thanks.

Expand|Select|Wrap|Line Numbers
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. .test_nav {
  5.     height:26px;
  6.     width:943px;
  7.     text-align: center;
  8.     position:absolute; 
  9.     font-family:arial, verdana, sans-serif; 
  10.     font-size:11px;
  11.     z-index:500;
  12.     border-top: #CCC solid 1px;
  13.     border-bottom: #CCC solid 1px;
  14. }
  15.  
  16. .test_nav .select {
  17.     margin:0; 
  18.     padding:0; 
  19.     list-style:none; 
  20.     white-space:nowrap;
  21. }
  22.  
  23. .test_nav li {
  24.     float:left;
  25. }
  26.  
  27. .test_nav .select a {
  28.     display:block; 
  29.     height:26px; 
  30.     float:none; 
  31.     padding: 0 0 0px; 
  32.     text-decoration:none; 
  33.     line-height:25px; 
  34.     white-space:nowrap; 
  35.     color:#000;
  36. }
  37.  
  38. .test_nav .select li.line a {
  39.     text-align: center;
  40.     color:#000;
  41. }
  42.  
  43. .test_nav .select a b {
  44.     display:block; 
  45.     padding:0 20px 0px 16px; 
  46.  
  47. }
  48.  
  49. .test_nav .select a:hover, 
  50. .test_nav .select li:hover a {
  51.     text-decoration: none;
  52.     text-align: center;
  53.     color: #a90909;
  54.     background-image: url(subnav_bg_blue.gif);
  55. }
  56.  
  57. .test_nav .select li.line a:hover, 
  58. .test_nav .select li.line:hover a {
  59.     color:#cfa;
  60. }
  61.  
  62. .test_nav .select a:hover b, 
  63. .test_nav .select li:hover a b {
  64.     text-decoration: none;
  65.     color: #fff;
  66. }
  67.  
  68. .test_nav .sub {
  69.     display:none;
  70. }
  71. .test_nav ul ul {
  72.     display:none;
  73. }
  74.  
  75. /* IE6 only */
  76. .test_nav table {
  77.     border-collapse:collapse; 
  78.     margin:-1px; 
  79.     font-size:1em; 
  80.     width:0; 
  81.     height:0;
  82. }
  83.  
  84. .test_nav .sub {
  85.     margin:0; 
  86.     padding:0;
  87.     list-style:none;
  88. }
  89.  
  90. .test_nav .sub li {background:transparent;}
  91.  
  92. .test_nav .select :hover .sub {
  93.     height:25px;
  94.     display:block; 
  95.     position:absolute;
  96.     float:left;
  97.     width:943px;
  98.     top:26px; 
  99.     left:1px; 
  100.     text-align:center;
  101.     border:1px solid #ccc;
  102.     border-width:1px  0;
  103. }
  104.  
  105. .test_nav .select :hover .rt li {
  106.     float:right;
  107. }
  108.  
  109. .test_nav .select :hover .sub li a {
  110.     display:block; 
  111.     height:26px; 
  112.     line-height:26px; 
  113.     float:left; 
  114.     background:transparent url(line/transparent.gif);
  115.     padding:0 12px; 
  116.     margin:0; 
  117.     white-space:nowrap; 
  118.     color:#888;font-size:9px;
  119. }
  120.  
  121. .test_nav .select :hover .sub li.subline a {color:#000;}
  122.  
  123. .test_nav .select :hover .sub li a:hover,
  124. .test_nav .select :hover .sub li:hover
  125. {color:#000; line-height:26px; position:relative;}
  126.  
  127. .test_nav .select :hover .sub li:hover > a {color:#000;}
  128.  
  129. .test_nav .select :hover .sub :hover ul {
  130.     padding:0;
  131.     margin:0; 
  132.     list-style:none; 
  133.     display:block; 
  134.     width:112px; 
  135.     position:absolute; 
  136.     left:-1px; 
  137.     top:26px; 
  138.     border-bottom:1px solid #000; 
  139.     background:#fff;
  140. }
  141.  
  142. .test_nav .select :hover .sub :hover ul ul {
  143.     position:absolute; left:-9999px;
  144. }
  145.  
  146. .test_nav .select :hover .sub :hover ul li {
  147.     border:1px solid #fff; border-width:0 1px;
  148. }
  149.  
  150. .test_nav .select :hover .sub :hover ul li a {
  151.     width:80px; 
  152.     text-align:left;
  153.     height:26px; 
  154.     line-height:18px; 
  155.     background:#fff;
  156.  }
  157. .test_nav .select :hover .sub :hover ul li a:hover {
  158.     line-height:16px;
  159. }
  160. .test_nav .select :hover .sub :hover ul li:hover > a {
  161.     line-height:26px;
  162. }
  163.  
  164. .test_nav .select :hover .sub :hover ul :hover ul {
  165.     left:112px; 
  166.     top:0; 
  167.     border:1px solid #ccc; 
  168.     border-width:0 1px 1px 0;
  169.     background:#fff;
  170.  }
  171.  
  172. .test_nav .select :hover .rt :hover ul :hover ul {
  173.     left:-113px; 
  174.     top:0; 
  175.     border:1px solid #ccc; 
  176.     border-width:0 0 1px 1px;
  177. }
  178.  
  179. .test_nav .select :hover .sub :hover ul :hover ul li {
  180.     border-left:1px solid #ccc; 
  181.     background:#fff;
  182. }
  183.  
  184. .test_nav .select :hover .sub :hover ul :hover ul li.a1 {
  185.     border-left:1px solid #fff;
  186. }
  187. .test_nav .select :hover .sub :hover ul :hover ul li.a2 {
  188.     border-top:1px solid #000;
  189.     height:26px;
  190. }
  191.  
  192. .test_nav .select :hover .rt :hover ul :hover ul li {
  193.     border-right:1px solid #000;
  194.     border-left:0;
  195. }
  196.  
  197. .test_nav .select :hover .rt :hover ul :hover ul li.a1 {
  198.     border-right:1px solid #fff; 
  199.     border-left:0;
  200. }
  201.  
  202. </style>
  203.  
Someone please tell me what I am doing wrong.
Mar 24 '08 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.