Hi
Firstly forgive the padding and formatting, the CSS / HTML below are just in concept phase and are in rough.
So my query... By using the CSSHOVER hack - I'm able to create CSS menus that work in IE using the HOVER pseudo-class.
What I'd like to do is allow users without a mouse to active the sub menu also, I thought FOCUS would do it, but appears not too. I was wondering if anyone had any suggestions?
CSS:
Code:
<style type="text/css">
/* */
body { behavior:url(csshover.htc); }
div#wrapper {
width:800px;
margin: 0 auto;
text-align:left;
padding:250px 100px;
background-color:#ccc;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
}
div#wrapper ul {
margin:0;
padding:0;
list-style:none;
float:left;
width:580px;
background-color:#f00;
}
div#wrapper ul li {
float:left;
position:relative;
}
div#wrapper ul a {
display:block;
width:180px;
padding:6px;
text-decoration:none;
color:#fff;
float:left;
}
div#wrapper ul a:hover {
text-decoration:underline;
}
div#wrapper ul li ul {
margin:0;
width:180px;
position:absolute;
z-index: 500;
top:-150px;
left:0;
}
div#wrapper ul li ul li {
width:180px;
}
div#wrapper ul li ul { display:none;}
div#wrapper ul li:hover ul, div#wrapper ul li:hover ul:hover,
div#wrapper ul li:active ul, div#wrapper ul li:active ul:active {display:block; }
</style>
sample HTML
Code:
<div id="wrapper">[list]
<li><a href="#" tabindex="1">Visit other Vodafone sites<br /> and get inspired.</a></li>
<li><a href="#" tabindex="2">Find out all the key facts<br /> about Vodafone.</a></li>
<li><a href="#" tabindex="3">Working at Vodafone.<br /> Have a peak.</a>
[list]
<li><a href="#">Working at Vodafone.<br />Have a peak</a></li>
<li><a href="#">Take a tour in our offices<br /> and meet the profiles.</a></li>
<li><a href="#">View our co-workers<br />testamonials.</a></li>
<li><a href="#">Are you the one we are<br />looking for?</a></li>
</ul>
</li>
</ul>
</div>
hover / focus pseudo-class query
