#1
  1. No Profile Picture
    *foo = *bar;
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Wheaton, IL
    Posts
    179
    Rep Power
    49

    Trying to center the typical CSS drop-down menu within a div


    I'm simply trying to center a horizontal menu with a drop down.

    The two methods I know of to align the list items in the top menu are 1)
    Code:
    li { float: left; }
    and 2)
    Code:
    li { display: inline; }
    .

    The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu.

    The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block.

    Works, but left aligned: http://www.highgatecross.com/develop...red_menu1.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Centered</title>
    	
    	<style type="text/css" title="style" media="all">
    		#navigation {
    			position: relative;
    			margin: 0 auto;
    			width: 800px;
    			height: 30px;
    			background: #9E9670 }	
    			
    		a {  
    			font: 11px verdana, sans-serif;
    			color: #54503B;
    			text-decoration: none }
    		
    		#menu { 
    			position: relative;
    			margin: 0 auto;
    			padding: 0; 
    			width: 600px; 
    			border: 1px solid #c00;
    			text-align:center }
    		
    		#menu li { 
    			float: left;
    			list-style: none }
    		
    		#menu li a {
    			display: block;
    			padding: 7px 25px }
    		
    		#menu li a:hover {
    			color: #F4E9AD }
    		
    		#menu li ul {  
    			position: absolute;
    			left: -1000em;
    			z-index: 10 }
    		
    		#menu ul {
    			float: left;
    			width: 100px;
    			list-style: none;
    			padding: 0 }
    		
    		#menu ul li a {
    			display: block;
    			padding: 7px 10px;
    			background-color: #C7BE8D;
    			width: 100px }
    		
    		#menu ul li a:hover {
    			background: #F4E9AD; 
    			color: #54503B }
    
    		#menu li:hover ul {
    			left: auto }
    	</style>
    	
    </head>
    <body>
    	<div id="navigation">
    		
    		<ul id="menu">
    			<li class="top"><a href="Home">Home</a></li>
    			<li class="top"><a href="About">About</a></li>
    			<li class="top"><a href="Training">Training</a>
    				<ul>
    					<li><a href="Overview">Overview</a></li>
    					<li><a href="Training_Schedule">Schedule</a></li>
    					<li><a href="Training_Contact">Contact</a></li>
    				</ul>
    			</li>
    			<li class="top"><a href="Events">Events</a></li>
    			<li class="top"><a href="Contact">Contact</a></li>
    		</ul>
    
    	</div>	
    </body>
    </html>
    Centers, but drop down is in the wrong place: http://www.highgatecross.com/develop...red_menu2.html
    Code:
    #menu li { 
        display: inline; /* float: left */
        list-style: none }
    		
    #menu li a {
        display: block; /* delete this line */
        padding: 7px 25px }
    Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible.

    Question: How to I center the top menu and have the drop down placed correctly?

    Thanks.
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Why didn't you just add a top value on #menu li:hover ul ? All you have to do is add top:8px; to that selector and it works. At least, that is what I thought you wanted. (I only tested in FF3)

    I also used your second link's code.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    There is also inline-block, which is more appropriate in this case, due to the list items' containing block elements.
    Code:
    #menu {   /* centered...enu2.html (line 20) */
      border: 1px solid #CC0000;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      width: 600px;
      }   /* notice that this is no longer positioned */
    
    #menu li {   /* centered...enu2.html (line 28) */
      display: -moz-inline-box;    /* for Firefox <3 */
      display: inline-block;   /* new value */
      ...
      position:relative;  /* new property */
      }
    
    #menu li ul {   /* centered...enu2.html (line 39) */
      left: -1000em;
      position: absolute;
      }   /* z-index unnecessary */
    
    #menu ul {   /* centered...enu2.html (line 44)  */
      list-style: none;
      padding: 0;
      margin: 0;   /* IE<8, and older Operas use left margin for indention */
      width: 100px;
      }
    IE can have problems with top and left values of auto; better to state 0 than auto.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo