CSS Issues with displaying a DIV with a UL on Hover

[Ash149]

Hello everyone! I’m knew here to the forum but have been a regular reader of CSS-Tricks for some time now, and just wanted to start of by saying how much of a fan of CSS-Tricks I am and how grateful I am for all the posts/tutorials – they’ve really helped a lot.

Now my first post on here is to get some help with displaying a DIV with a UL inside it when I hover over a specific LI on my site. Basically I have an UL like this:

And on the page I have another DIV with a UL inside it.

The CSS for the first menu is fine, what I want is for when you hover over the LI with id ‘item-104’ you see the UL securitymenu-dropdown. I can’t do it for normal way by having the dropdown menu within the first menu as this is how the CMS i’m using is out putting the HTML.

Anyway my CSS for the dropdown menu is as follows:

html body div.container_16 div.grid_14 div.moduletablesecuritymenu-module ul#security-menudropdown.menusecurity-menu {margin:0; padding:5px; left:400px; position:absolute; background-color:red; width:192px; list-style-type:none; z-index:5; }



div.moduletablesecuritymenu-module {display:none; }



li#item-104:hover div.moduletablesecurity-menu-module {display:block; }

When I remove the display:none from the above CSS, the dropdown menu displays fine, it’s just I need it to only show when you hover over li with the ID of 104.

Can anyone see what I have done wrong? If so any help would be veyr appreciated.

Thanks,

Ashley

[stevendeeds]

can you please edit this post and put any code in code tags?

[stevendeeds]

Ah, this is done with javascript brother. you’re gonna want to do one of two things. Since it’s a warning, you can use the alert(); function in javascript, or if you truly want to change the classes to one that displays, and one that displays none… then you’ll be looking at something like this…

function changeClassDood (elementID, newClass) {

var element = document.getElementById(elementID);



element.setAttribute("oldClass", newClass);

}

and then, your html would be like…

I think that should work…

[Ash149]

Hey,

Thanks for getting back to me, sorry I didn’t out my code in CODE tags, my bad!

Solved it now using javascript, so thank you stevendeeds.

:) Ash

[Author]

Posts