Jump to content

CSS Menu not working


cclloyd9785
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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 by cclloyd
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 by cclloyd
Link to comment
Share on other sites

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 by cclloyd
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...