<head>
<style type="text/css">
#div1
{
float: left;
background: #00FF00;
padding: 5px 20px 5px 20px;
height: 60px;
}
#div2
{
background: #00A0A0;
padding: 5px 20px 5px 20px;
}
#div3
{
background: #FF0000;
padding: 5px 20px 5px 20px;
height: 20px;
}
#div4
{
background: #FF00FF;
padding: 5px 20px 5px 20px;
display: none;
}
#div3:hover #div4
{
background: #FFFF00;
display: block;
}
</style>
</head>
<div id="div1">
<div id="div2">
<div id="div3"> Hello div3
<div id="div4"> There is a long long text a in div4.</div>
<div id="div4"> There is a long long text b in div4.</div>
<div id="div4"> There is a long long text c in div4.</div>
</div>
</div>
</div>
I want to create a drop-down menu, above code is for testing, you can copy the code to a blank htm page to see its performance.
Problem is that width of div3 (red) becomes wider when div4 is shown (as display:block).
div3 is top-menu, its width must not be changed.
Can you solve the problem?
Thanks.
