Is there a way to modify my CSS Combo Box to display the menu div when hovering over the button div instead of the dropdown div?
I have a container div with a dropdown div containing a button and a hidden menu. Currently, the menu is displayed when hovering over the dropdown div, but I want it to show when hovering over the button div.
<!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>