PDA

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



mya7709
10-27-2011, 01: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, 07: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