Comments on: CSS Help!

Question: CSS Help!

LoopyG — Mon, 14 Aug 2006 12:30:07 -0800

CSS Help! I have a menu which uses links ( tags ) and I want to make it so when I hover over an item in the menu, it makes a list visible!

Here is the thing, I have a menu like this:

a.nav1 {background-position:0 150px;}
a.nav1 .button {background:azure; color:#000; cursor:pointer; display:block; width:128px; height:25px; cursor:hand;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {background:#f80; color:#fff; cursor:pointer; display:block; width:128px; height:25px; cursor:hand;}

And I have a sub-menu using a list, like this:
/* remove the bullets, padding and margins from the lists */
ul.menu {
background:azure;
list-style-type:none;
padding:0;
margin:0;
visibility:hidden;
position:absolute;
width:128px;
height:280px;
top:152px;
}

I want to make it so that when I hover over a1.nav, it makes the ul.menu visible. However this doesnt seem to work if I simply add the line:

a1.nav:hover ul.menu {visibility:visible}

Please help me make it so that when I hover over a1.nav that I can make ul.menu visible!

By: LoopyG

LoopyG — Mon, 14 Aug 2006 12:30:37 -0800

by the way, that was meant to be '< 'a'>' tags, without the apostraphes

By: staggernation

staggernation — Mon, 14 Aug 2006 12:46:52 -0800

a1.nav:hover ul.menu {visibility:visible}

Shouldn't that be a.nav1 instead of a1.nav?

By: LoopyG

LoopyG — Mon, 14 Aug 2006 12:56:59 -0800

My mistake, I should have copied and pasted, it does indeed say

a.nav1:hover ul.menu {visibility:hidden;}

And does not work even when typed correctly =)

By: juiceCake

juiceCake — Mon, 14 Aug 2006 13:00:27 -0800

I don't have the answer as I haven't had time to play with this sort of thing yet. However, you may find the answer here:

CSS Play.

More particularly in the Menu section.

By: staggernation

staggernation — Mon, 14 Aug 2006 13:04:24 -0800

Well, that rule will only work if ul.menu is contained within a.nav1, which seems sort of weird (having an entire menu inside a link). Is that actually what you're trying to do?

By: malevolent

malevolent — Mon, 14 Aug 2006 13:10:02 -0800

You're putting a list inside a link? Ugh, might be a good idea to rethink the markup and consult the various dropdown articles at A List Apart.

By: LoopyG

LoopyG — Mon, 14 Aug 2006 13:12:06 -0800

I do not have the list inside the link, and did not realize that I would have to do so. I am a C++ programmer, new to CSS/HTML. Was hoping to be able to have something akin to a "Friend" class, where the link could affect the lists properties. If needbe, I can redo this whole thing by making my menu a list as well, and then having a sub-list within the main list. Is this a better solution?

By: malevolent

malevolent — Mon, 14 Aug 2006 13:17:25 -0800

Ah right, if you read a few CSS dropdown articles it should make things clearer (basically, with care you can do it with pure CSS in Firefox etc. using adjacent-sibling selectors, but have to resort to a bit of JavaScript to cater for IE).

By: juiceCake

juiceCake — Mon, 14 Aug 2006 13:20:11 -0800

"but have to resort to a bit of JavaScript to cater for IE)."

If you visit CSS Play, you'll find solutions where you don't have to resort to JavaScript, and furthermore, solutions that validate, despite the IE hacks.

By: Pigpen

Pigpen — Mon, 14 Aug 2006 13:34:06 -0800

Put your menu links in a list, then nest the list of tags inside those LIs (but not inside the A tag.)

By: AmbroseChapel

AmbroseChapel — Mon, 14 Aug 2006 13:40:05 -0800

Short answer, especially if you're not a fulltime CSS/JS coder: use SuckerFish, which is generally acknowledged to be the most solid and the most valid CSS-drop-menu system.

Even if you get yours working, you'll then find you need ten little wrinkles for ten different browsers because of bugs.

By: LoopyG

LoopyG — Mon, 14 Aug 2006 14:42:09 -0800

I tried using pigpen's method, and it worked very well. However, as AmbroseChapel said, there were bugs in IE viewing. I instead simply load a new page that has a different interface for navigating the sub-menu (only one of the main menus items had a sub-menu).

By: jxpx777

jxpx777 — Mon, 14 Aug 2006 17:30:26 -0800

Try it using display:none instead of visibility:invisible. And I would also suggest putting your links in a list instead of just autonomous anchor tags. Here is something that could work (untested).

ul#navigation li ul {display: none;}
ul#navigation li:hover ul, ul#navigation li.over ul{display:block; position:absolute; top:1em;}
ul#navigation li {position:relative; display:inline;}

Then you can do something like

< ul>
< li>< a>Nav Item< /a>< /li>
< li>< a>Nav Item< /a>
< ul>
< li>< a>Sub Nav Item< /a>< /li>
< li>< a>Sub Nav Item< /a>< /li>

< /li>
< /ul>

The only problem with this is that IE doesn't respect the pseudo-class :hover on non-anchor elements, so you would need a tiny bit of Javascript to implement this for IE.

window.onload = function(){
var theNav = document.getElementById('navigation');
var theList = theNav.getElementsByTagName('li');
for(i = 0; i < thelist.length; i++){br> theList[i].onmouseover=function(){
this.className += " over";
}
theList[i].onmouseout = function(){
this.className=this.className.replace(" over", "");
}
}
}

You might want to use an addLoadEvent() function and put the above in an ie.js file and call it with conditional commenting so that it isn't crufting up your other code.

Hope this helps.