Email conversation
| From | Fu E Luo |
|---|
| To | Me |
|---|
| Subject | Problem with Pure CSS menus |
|---|
| Date | 9 August 2004 22:17 |
|---|
Hi,
First off, I just want to say that your tutorial was just what I was
looking for. Creating a menu with CSS and not JavaScript.
The example code you've shown on your site begins something like this:
<ul class="makeMenu">
<li>>> Lips
<ul>
</ul>
....and it goes on.
I had a problem when I made one minor change. The new code looks like this:
<ul class="makeMenu">
<li><a href="lips.html">>> Lips</a>
<ul>
...
</ul>
.....
I wanted the top menu block ('Lips' in this case) to also be a link. But
the result wasn't good. Moving the mouse pointer from 'Lips' to the submenu
'Cat' changed the font color of 'Lips' to be something unreadable.
Hope you can help. Thanks,
Fu Luo
| From | Me |
|---|
| To | Fu E Luo |
|---|
| Subject | Re: Problem with Pure CSS menus |
|---|
| Date | 11 August 2004 08:35 |
|---|
Fu,
you need to incluse an extra couple of lines of CSS to say that child links
of a hovered LI must also be coloured, even if the links themselves are not
being coloured
however, you also need to counterract that so that child links of a child
LI of a hovered LI are not coloured, unless they themselves are hovered
(hay, no-one said this was easy)
for good browsers that understand the > selector (not IE on windows ...),
this is very easy
/* extra selectors for extra specificity - just in case */
ul.makeMenu li:hover > a { color: 000; }
but for IE/windows, the two 'for' loops in the .htt file need to be changed
to add the extra functionality
...
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].style.color = '#000'; }
}
...
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].style.color = '#fff'; }
}
...
with any luck, that should work
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/