www.webdeveloper.com
Results 1 to 3 of 3

Thread: problem : display block (menu related)

  1. #1
    Join Date
    Apr 2005
    Posts
    210

    problem : display block (menu related)

    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.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    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!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2005
    Posts
    210
    Start by defining a width for #div1
    Worst idea.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles