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
- @charset "UTF-8";
- /* CSS Document */
- .test_nav {
- height:26px;
- width:943px;
- text-align: center;
- position:absolute;
- font-family:arial, verdana, sans-serif;
- font-size:11px;
- z-index:500;
- border-top: #CCC solid 1px;
- border-bottom: #CCC solid 1px;
- }
- .test_nav .select {
- margin:0;
- padding:0;
- list-style:none;
- white-space:nowrap;
- }
- .test_nav li {
- float:left;
- }
- .test_nav .select a {
- display:block;
- height:26px;
- float:none;
- padding: 0 0 0px;
- text-decoration:none;
- line-height:25px;
- white-space:nowrap;
- color:#000;
- }
- .test_nav .select li.line a {
- text-align: center;
- color:#000;
- }
- .test_nav .select a b {
- display:block;
- padding:0 20px 0px 16px;
- }
- .test_nav .select a:hover,
- .test_nav .select li:hover a {
- text-decoration: none;
- text-align: center;
- color: #a90909;
- background-image: url(subnav_bg_blue.gif);
- }
- .test_nav .select li.line a:hover,
- .test_nav .select li.line:hover a {
- color:#cfa;
- }
- .test_nav .select a:hover b,
- .test_nav .select li:hover a b {
- text-decoration: none;
- color: #fff;
- }
- .test_nav .sub {
- display:none;
- }
- .test_nav ul ul {
- display:none;
- }
- /* IE6 only */
- .test_nav table {
- border-collapse:collapse;
- margin:-1px;
- font-size:1em;
- width:0;
- height:0;
- }
- .test_nav .sub {
- margin:0;
- padding:0;
- list-style:none;
- }
- .test_nav .sub li {background:transparent;}
- .test_nav .select :hover .sub {
- height:25px;
- display:block;
- position:absolute;
- float:left;
- width:943px;
- top:26px;
- left:1px;
- text-align:center;
- border:1px solid #ccc;
- border-width:1px 0;
- }
- .test_nav .select :hover .rt li {
- float:right;
- }
- .test_nav .select :hover .sub li a {
- display:block;
- height:26px;
- line-height:26px;
- float:left;
- background:transparent url(line/transparent.gif);
- padding:0 12px;
- margin:0;
- white-space:nowrap;
- color:#888;font-size:9px;
- }
- .test_nav .select :hover .sub li.subline a {color:#000;}
- .test_nav .select :hover .sub li a:hover,
- .test_nav .select :hover .sub li:hover
- {color:#000; line-height:26px; position:relative;}
- .test_nav .select :hover .sub li:hover > a {color:#000;}
- .test_nav .select :hover .sub :hover ul {
- padding:0;
- margin:0;
- list-style:none;
- display:block;
- width:112px;
- position:absolute;
- left:-1px;
- top:26px;
- border-bottom:1px solid #000;
- background:#fff;
- }
- .test_nav .select :hover .sub :hover ul ul {
- position:absolute; left:-9999px;
- }
- .test_nav .select :hover .sub :hover ul li {
- border:1px solid #fff; border-width:0 1px;
- }
- .test_nav .select :hover .sub :hover ul li a {
- width:80px;
- text-align:left;
- height:26px;
- line-height:18px;
- background:#fff;
- }
- .test_nav .select :hover .sub :hover ul li a:hover {
- line-height:16px;
- }
- .test_nav .select :hover .sub :hover ul li:hover > a {
- line-height:26px;
- }
- .test_nav .select :hover .sub :hover ul :hover ul {
- left:112px;
- top:0;
- border:1px solid #ccc;
- border-width:0 1px 1px 0;
- background:#fff;
- }
- .test_nav .select :hover .rt :hover ul :hover ul {
- left:-113px;
- top:0;
- border:1px solid #ccc;
- border-width:0 0 1px 1px;
- }
- .test_nav .select :hover .sub :hover ul :hover ul li {
- border-left:1px solid #ccc;
- background:#fff;
- }
- .test_nav .select :hover .sub :hover ul :hover ul li.a1 {
- border-left:1px solid #fff;
- }
- .test_nav .select :hover .sub :hover ul :hover ul li.a2 {
- border-top:1px solid #000;
- height:26px;
- }
- .test_nav .select :hover .rt :hover ul :hover ul li {
- border-right:1px solid #000;
- border-left:0;
- }
- .test_nav .select :hover .rt :hover ul :hover ul li.a1 {
- border-right:1px solid #fff;
- border-left:0;
- }
- </style>