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 to correctly use text overflow in bootstrap

    How to create multi-column data entry form using CSS in Asp.Net?

    how to put image on button? (css)

    How do I wrap a long string in a fixed-width container with CSS?

    Space between list, space on left side of the ul. How to remove this?

    how to use auto with a height in css

    How to define css selector class prefix with SASS

    How to keep top of element static while bottom is dynamic. -CSS

    How to remove CSS Class in aspx pages source codes using Regex?

    How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How to use CSS timing functions to animate an arc?

    How to apply css hover on multiple elements

    How to set CSS position properties to none ?

    show css icon with select icon class selcetbox

    How to Overlap Parent Div From Child Div

    How can I set my image's hover when hovering my text?

    How to change angularJS's default css styles? Search box etc

    How do I make images fit the entire screen fully, regardless of screen size?

    How to put a canvas on an image?

    How to paste a style sheet into a new document window in a Rally app

    How to make margin collapsing work with input type=button/submit?

    How to use both -moz- and -webkit- css property to support different browsers?

    How can I stretch an empty floating div to the full height available using css?

    How do I customize the rdoc Darkfish stylesheet?

    How to set two divs side-by-side with the same height?

    Mojolicious Tests: How to get the input value using css-selectors

    How can I expand this picture to cover the width of my page?

    CSS: How to add borders of different colors to input radio buttons labels?

    how to calculate css rules priority in Javascript?