Code:
<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.