CSS Menu not working

[cclloyd9785]

I have a CSS dropdown menu, and to make it drop down, I have one ul, and have it set to ul li#home:hover > .submenu {top:230px;opacity:1;} But, the only way it changes the properties of the .submenu is when .submenu is within the li#home, and not when they are 2 separate lists, which I have to do to get it to work the way I want. Any way to get it to apply the styles on hover to the .submenu?

[newseed]

Almost anything is possible but its still not clear in what you are trying to do. Maybe provide a url of the menu you are working on.

[cclloyd9785]

The page is a mess and therefore not able to post, but here is example code to display what I mean. CSS

div#1 {width:100px;height:100px;background:blue;}div#2 {width:50px;height:50px;background:red;}div#1:hover > #2 {background:green;}

And the HTML

WORKS:<div id="1"><div id="2"></div></div>  DOESN'T WORK:<div id="1"></div> <div id="2"></div>

It only seems to work when the div is nested inside the other one, but the way the page is set up, it won't work unless it isn't inside the div, but separate.

Edited May 17, 2013 by cclloyd

[dsonesuk]

You should be using a unordered list, because of the ul is structured, it is ideal for producing a menu as the parent can be use to reference its child submenus, by keeping them individual how are you going to tie submenus to there parent elements. For your code to work you would have to use '+' or '~', the '+' targets the first sibling element, while '~' can target a sibling further down below it, but this is not practical for use in a menu. EDIT: DON'T use a number on its own as a id ref, ideally is should start with letter first.

Edited May 17, 2013 by dsonesuk

[cclloyd9785]

Yea I know, about the numbers; that was just for example. Anyway, the list is a ul, but when I nest the sub menu inside a li, it doesn't display properly. Edit: Another issue I'm having is that when I nest it inside the li, it leaves a blank space for the menu, and if I hover over that blank space it shows, unless I set it to display:none, but if I do that, then the fade-in transition doesn't work.

Edited May 17, 2013 by cclloyd

[dsonesuk]

Have you zeroed all the default values for margin, padding and textindent?

[cclloyd9785]

I zero'd all them, which did fix an issue I was having with the width, but now there are spaces in between them that have no reason to be there. http://webdev.cclloyd.com/Test%20Menu/ Edit: I actually got it working basically how I want it to on that page. The only issue I have now is I want it to be hidden behind the parent li, instead of on top of it. I tried z-indexing them both but it didn't work.

Edited May 18, 2013 by cclloyd