div rollover visibility another div

[The Scarecrow]

I am trying to have a DIV with a link attached on rollover show another DIV.  The following example is what I have and it doesnt work.  Has anyone done this before?  Thanks.

 

Ex. HTML

 <a href="#"> <div id="projectbutton" class="fluid"><img src="projects_icon.jpg" alt="Projects Navigation Icon" height="43"/><br>PROJECTS</div></a>

 

        <div id="submenu1" style="background-color:#35BC7A; color:#FFF; border:#000 solid 1px; width:18%; height:15%; margin-left:475px; margin-top:155px; position:absolute; z-index:1000; display:none;"><a href="#">Websites</a></div>

 

CSS

#projectbutton:hover + #submenu2 {

display:block;

}

 

[briley]

(Edit: re-worded some points, added links for reference)

 

I see a couple issues:

• Your CSS refers to #submenu2, and your div ID is #submenu1, but I assume that's just a typo from your example.
• You are applying the display:none style on #submenu2 using inline styles, and then trying to apply the display:block style using a stylesheet. According to CSS specificity rules, the inline style has higher priority than the stylesheet, and so the display:none will always override the display:block. You either need to use the !important declaration in your stylesheet, or you need to move the styles for #submenu2 into a stylesheet as well.
• Your CSS rule (#projectbutton:hover + #submenu2 { ... }) uses the adjacent sibling selector (the "+"), which requires that both elements have the same parent and be right next to each other. In your example, #projectbutton is inside the <a> element, while #submenu2 is outside the <a> element, which makes them non-adjacent. You need to move #submenu2 immediately after #projectbutton for that selector to work.

 

I put together a quick demo of something that seems what you're after, perhaps it will help: http://jsfiddle.net/oth47stb/. The HTML and CSS is a little different than what you have, but it's a way to do a CSS-only rollover menu. There are also lots of examples of CSS-only dropdown menus on Google (search for "css only dropdown menu")