[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
06/12/2009 at 03:57PM PDT, ID: 24488222 | Points: 250
[x]
Attachment Details

Have css horz menu 2nd level appear when on focus

Asked by netsmithcentral in Cascading Style Sheets (CSS)

I'm trying to make the 2nd level menu items appear for accessibility standards when a user tabs through the menu. Currently, the tabs highlight the First level but don't show the drop down. view page at:

http://www.netsmithcentral.com/ccce/pages/default.html 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:

/* -- MAIN-NAV MENU -- */	 
		  
.menu {
width:811px; 
height:28px; 
font-size:0.55em; 
position:relative;
z-index:100;
border-right:1px solid #FFFFFF;
}
 
/* hack to correct IE5.5 faulty box model */
* html .menu {
width:811px; 
w\idth:811px;
}
 
/* 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:90px;
}
 
 
/* 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:90px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited{
display:block; 
font-size:7pt;
text-decoration:none; 
color:#000000; 
width:90px; 
height:27px; 
border:1px solid #FFFFFF; 
border-width:1px 0 1px 1px; 
background:#808080; 
padding-left:1px; 
line-height:13px;
}
 
 
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:90px; 
w\idth:90px;}
 
/* .menu a:active, .menu a:focus {
background-color:#88bf59;
color:#000000;
} -- Not Working -- */
 
 
.menu ul ul :hover > a.drop {
background: url(..//images/dropgrn.gif) bottom right no-repeat;
}
 
 
/* 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:0;top:28px;left:0;
width:90px;
border-top:1px solid #FFFFFF;
}
 
/* another hack for IE5.5 */
* html .menu ul ul {
top:28px;t\op:28px;
}
 
/* .menu ul ul a:active, .menu ul ul a:focus {
background-color:#88bf59;
color:#000000;
} --Not Working --*/
 
.menu ul li ul li a:active, .menu ul li ul li a:focus {
background-color:#88bf59;
color:#000000;
}
 
/* 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 {
background-color:#88bf59; /* Bright green */
color:#000000;
height:auto; 
line-height:1em;
padding:5px 5px; 
width:80px;
border-width:0 1px 1px 1px;
}
 
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:90px;
w\idth:90px;
}
 
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover, .menu a:active, .menu ul ul a:active, .menu a:focus, .menu ul ul a:focus {
color:#000000; 
background-color:#bbf187;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#000000;
/* background:#88bf59; */
}
 
/* .menu :focus > a, .menu ul ul :focus > a {
background:#88bf59;
} -- Not Working -- */
 
 
/* make the second level visible when hover or focus on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul li:focus ul, .menu ul a:focus ul {
visibility:visible;
}
 
.menu a:active {
display:block; 
font-size:7pt;
text-decoration:none; 
color:#000000; 
width:90px; 
height:27px; 
border:1px solid #FFFFFF; 
border-width:1px 0 1px 1px; 
background:#88bf59; 
padding-left:1px; 
line-height:13px;
}
 
/* -- END MAIN-NAV MENU -- */
 
Keywords: Have css horz menu 2nd level appear…
Title
1 javascript won't enable
2 IE 6.0 [GIF images only appear fro…
3 QuickPost - bug reports, questions
4 CS Toolkit v2 Issues
5 QuickPost - bug reports
 
Loading Advertisement...
 
[+][-]06/13/09 06:15 PM, ID: 24621476

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091028-EE-VQP-86 - Hierarchy / EE_QW_4_20070622