problem : display block (menu related)

**html20009876** · 04-01-2012, 03:13 PM

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.

**rtrethewey** · 04-01-2012, 08:03 PM

The first thing to do is to replace the values of the 'id' attributes in your code. Every value of 'id' attributes must be unique. If you need to reuse a CSS definition, use a 'class' attribute.

Your 'div3' becomes wider when a 'div4' is displayed because you haven't defined a width for any of them. Start by defining a width for #div1. Good luck!