...

View Full Version : how to set the alignment for a CSS dropdown menu?



mya7709
10-27-2011, 02:53 PM
how to set the alignment for a CSS dropdown menu?

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>


#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.

rendezor
10-29-2011, 08:11 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum