Results 1 to 3 of 3

Thread: [RESOLVED] Help with simple horizontal menu

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2000
    Posts
    1,091

    Resolved [RESOLVED] Help with simple horizontal menu

    I've got a good start, but having an issue with the content below the menu. I need #content div to be visible underneath the menu, but it is not. If the menu wraps by shrinking the page, #content should be pushed downward to still be visible.

    Any help would be appreciated.

    HTML:
    HTML Code:
        <div id="cssm1">
            <ul>
                <li><a href="Page1.aspx">Page 1</a></li>
                <li><a href="Page2.aspx">Page 2 long text...</a></li>
                <li><a href="Page3.aspx">Page 3</a></li>
                <li><a href="Page4.aspx">Page 4</a></li>
                <li><a href="Page5.aspx">Page 5</a></li>
                <li><a href="Page6.aspx">Page 6</a></li>
                <li><a href="Page7.aspx">Page 7</a></li>
                <li><a href="Page8.aspx">Page 8</a></li>
                <li><a href="Page9.aspx">Page 9</a></li>                                                                     
            </ul>
        </div>
        <div id="content">
            This should be visible even if menu wraps
        </div>
    CSS:
    Code:
    #cssm1 *  
    { 
    	padding:0; 
    	margin: 0; 
    	font: 12px arial; 
    }
    
    #cssm1 
    {
    	position: absolute;  
    	z-index: 99; 
    	margin: 0 auto; 
    	float: left; 
    	line-height: 20px;
    }
    
    #cssm1 a 
    {
    	display: block; 
    	border: 1px solid #fff; 
    	background: gainsboro; 
    	text-decoration: none; 
    	padding: 3px 10px; 
    }
    
    #cssm1 a:hover  
    {
    	background: #789;
    }
    
    #cssm1 ul li, #cssm1 ul li ul li  
    {
    	list-style-type:none; 
    }
    
    #cssm1 ul li 
    {
    	float: left; 
    }
    
    #cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul
    { 
    	display:none;
    	list-style-type:none; 
    }
    
    #cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul 
    { 
    	display:block; 
    }
    
    #cssm1:hover ul li:hover ul li:hover ul 
    { 
    	position: absolute;
    
    }

    Visual Studio 2010

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Help with simple horizontal menu

    Do you have a reason for using absolute positioning on #cssm1? If not, take that off and add clearing for #content (#content{clear:left;}).

    If so, then #cssm1 is outside of the normal positioning flow; adjacent elements can't account for it when positioning themselves. Additionally, margin with an "auto" value and float have no effect on an absolutely positioned element. So you'd need to use top and left to stick #cssm1 to a particular position, and then leave some empty space for it to occupy; such as:
    Code:
    #content{
    	margin-top:50px;
    }
    #cssm1{
    	position: absolute;  
    	z-index: 99; 
    	top:0;
    	left:0;
    	line-height: 20px;
    }
    That'll fix #cssm1 to the top-left corner, and give #content a top-margin of 50px that #cssm1 can occupy.

  3. #3

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2000
    Posts
    1,091

    Re: Help with simple horizontal menu

    That did it! Thanks SambaNeko!

    Visual Studio 2010

Posting Permissions

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



Click Here to Expand Forum to Full Width