CSS. Parent > Child1:hover. How to display Parent > Child2?


Tags: css

Problem :

Hopefully the title of my question was clear enough.

Here's a really simple version of my CSS Combo Box. I think I'm just missing something minor and hope you can help with it. Basically I have a container Div, then I have a dropdown Div that holds the floated button on the right. Inside this dropdown Div I also have a Menu Div that is hidden until the user hovers the floated button Div.

I can get it to work by hovering over the dropdown Div since the menu Div is a child of it HOWEVER, I wanted to be able to hover over the button Div which is the first child of dropdown Div and display menu Div, which is the second child of dropdown div and not of button div.

Is there a way to accomplish this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">


#container {
position: relative;
background-color: #999999;
height: 31px;
width: 200px;
}

#container #dropdown {
background-color: #999999;
height: 31px;
width: 200px;
}

#container #dropdown #button {
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}

#container #dropdown #button:hover #menu  {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;

}

#container #dropdown #menu {
display: none;
position: absolute;
background-color: #777777;
top: 32px;
height: 200px;
width: 200px;
}


</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>

<div id="container">

<div id="dropdown">

<div id="button"></div>
<div id="menu">
Option 1
<br/>
Option 2
<br/>
Option 3
</div>
</div>



</div>


</body>
</html>


Solution :

Try placing your div#menu inside your div#button. Then, give div#menu the following properties: position: relative, display: block, and top: 25px. Give your button div an overflow: hidden. then, change your #container #dropdown #button:hover #menu selector to #container #dropdown #button:hover, and give it the following properties: width: auto, height: auto, overflow: visible. See this jsFiddle for a working example: http://jsfiddle.net/kzEek/


    CSS Howto..

    How do I apply CSS styling to a
    block?

    disabling stylesheets to increase the speed of showing/hiding divs

    2 divs aligned side by side, how to make right div fill width 100%?

    how to get image to show up to the left of panel (both in same row)

    new google images how do they float correctly

    How to make navigation bar scroll with the page?

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How to sort and combine this css rules so it doesn't repeat so much?

    How to lessen CSS

    How to style five rows with alternating fixed/variable width?

    How to use CSS on autocomplete textbox selected values

    How to remove unnecessary margin on top?

    How to fade the background-image to black with CSS?

    How to change the background colour's opacity in CSS [duplicate]

    How to explain CSS Float in general language?

    How to put CSS content in select box and rotate it?

    How to draw outside borders only in thead

    How to make a barlike chart but only with html and css [closed]

    How to debug HTML/CSS for iPhone/iPad performance?

    show hidden div below current row of divs in responsive layout with jquery

    ASP.NET How to set Text to the right side of image

    How to change background-color of selected option in IE11?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    How to deselect with CSS?

    SCSS / Sass: How do i change a mixin to output specific CSS?

    How to color a responsive table in Bootstrap?

    Hovering over item in WordPress list of pages shows Featured Image

    ASP.net - How to achieve CSS with constant values, arithmetic and string manipulation

    How to center this by using css?

    Bootstrap CSS - How to get control label with inline radios below it