CSS Help!

August 14, 2006 12:30 PM

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!

posted by LoopyG to computers & internet (13 comments total)

by the way, that was meant to be '< 'a'>' tags, without the apostraphes
posted by LoopyG at 12:30 PM on August 14, 2006

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

Shouldn't that be a.nav1 instead of a1.nav?
posted by staggernation at 12:46 PM on August 14, 2006

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 =)
posted by LoopyG at 12:56 PM on August 14, 2006

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.
posted by juiceCake at 1:00 PM on August 14, 2006

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?
posted by staggernation at 1:04 PM on August 14, 2006

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.
posted by malevolent at 1:10 PM on August 14, 2006

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?
posted by LoopyG at 1:12 PM on August 14, 2006

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).
posted by malevolent at 1:17 PM on August 14, 2006

"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.
posted by juiceCake at 1:20 PM on August 14, 2006

Put your menu links in a list, then nest the list of tags inside those LIs (but not inside the A tag.)
posted by Pigpen at 1:34 PM on August 14, 2006

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.
posted by AmbroseChapel at 1:40 PM on August 14, 2006

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).
posted by LoopyG at 2:42 PM on August 14, 2006

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.
posted by jxpx777 at 5:30 PM on August 14, 2006