Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to set the alignment for a CSS dropdown menu?

    how to set the alignment for a CSS dropdown menu?
    Code:
    td align="center">
    	<ul id="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a>
    		<ul>
    			<li><a href="#">About Us</a></li>
    			<li><a href="#">About Them</a></li>
    			<li><a href="#">About You</a>
    				<ul>
    					<li><a href="#">More About Us</a></li>
    					<li><a href="#">More About Them</a></li>
    					<li><a href="#">More About You</a></li>						
    				</ul>
    			</li>						
    		</ul>
    	</li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a>
    		<ul>
    			<li><a href="#">International</a></li>
    			<li><a href="#">Corporate</a>
    				<ul>
    					<li><a href="#">International</a></li>
    					<li><a href="#">Corporate</a></li>
    					<li><a href="#">American Offices</a></li>
    				</ul>
    			</li>
    			<li><a href="#">American Offices</a></li>						
    		</ul>
    	</li>	
    	<li><a href="#">Mission Statement</a></li>		
    </ul>
    	</td>
    Code:
    #nav {
     background: #e5e5e5;
     margin-left:0;
     margin-right:0;
     margin-top:0; margin-bottom:0;
     padding: 0;
     border: 0px solid white;
     border-bottom: none;
     position:relative
    }
    
    #nav li a, #nav li {
     float: left;
    }
    
    #nav li {
     list-style: none;
     position: relative;
     margin-left:0;
    }
    
    #nav li a {
     padding: 1em 2em;
     text-decoration: none;
     color: white;
     background: #292929;
     background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
     background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
     border-right: 1px solid #3c3c3c;
     border-left: 1px solid #292929;
     border-bottom: 1px solid #232323;
     border-top: 1px solid #545454;
    }
    
    #nav li a:hover {
     background: #2a0d65;
     background: -moz-linear-gradient(top, #11032e, #2a0d65);
     background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
    }
    
    
    /* Submenu */
    
    .hasChildren {
    	position: absolute;
    	width: 5px; height: 5px;
    	background: black;
    	right : 0;
    	bottom: 0;
    }
    
    #nav li ul {
     display: none;
     position: absolute;
     left: 0;
     top: 100%;
     padding: 0; margin: 0;
    }
    
    #nav li:hover > ul {
     display: block;
    }
    
    #nav li ul li, #nav li ul li a {
     float: none;
    }
    
    #nav li ul li {
     _display: inline; /* for IE6 */
    }
    
    #nav li ul li a {
     width: 150px;
     display: block;
    }
    
    /* SUBSUB Menu */
    
    #nav li ul li ul {
     display: none;
    }
    
    #nav li ul li:hover ul {
     left: 100%;
     top: 0;
    }
    
    
    #nav li ul
    this is my CSS code.

  • #2
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I do not know which element you want to align.If you mean, will set the align Menu Section , then You cannot set the menu section with align property... cause this is a LIST with "block-level element " .
    In your HTML, I see the menu are in td (table) elements.. Soo the position of menu just can only be set along the td section


  •  

    Posting Permissions

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