CSS drop downs not lined up

[yinyang042]

Hey Everyone,

I am trying to implement drop down menus' via CSS on my site. I have it working properly, however I want the drop down menu's to be in the middle below the menu at the top. They seem to be over to the right side for some reason. I tried messing with the CSS but was not able to get it to move over. Anyone have any idea?

Here is the site link:

http://www.designingdigitally.com/portfolio/index.php


Here is my code for the drop downs:


CSS FILE:

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
float: left;
position: relative;
}

.mainitems{
border: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.mainitems a{
margin-left: 0px;
margin-right: 0px;
text-decoration: none;
}

.subuls{
display: none;
width: 12em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #333333;
border: 1px solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
z-index: 0;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: underline;
}

.subuls li a:hover{
color: #FF9B37
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}


HTML CODE:

<li class="mainitems"><a href="company.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('COMPANY','','../images/menuover/menuover_r1_c2.gif',1)"><img src="../images/menuup/menuup_r1_c2.gif" alt="COMPANY" name="COMPANY" width="88" height="19" border="0" id="COMPANY" /></a>
<ul class="subuls">
<li><a href="http://www.designingdigitally.com/company.htm">About Us</a></li>
<li><a href="http://www.designingdigitally.com/policy.html">Our Policy</a></li>
<li><a href="http://www.designingdigitally.com/staff.html">The Team</a></li>
<li><a href="http://www.designingdigitally.com/history.html">Our Statement</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>

[TJ111]

.subuls{
display: none;
width: 12em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #333333;
border: 1px solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
z-index: 0;
}
Position:absolute will align it at exactly the top-left at the element. Your moving the top down 1.2em; Set the left: to a negative number. Like:

position:absolute;
top:1.2em;
left:-0.8em;

[dubwb]

yinyang,

I just checked out your site and it looks like the drop down list is working like you want it to. I've attached a screen shot of how it looks on my PC (Win XP, FF version 2.0.0.11).10143

[yinyang042]

I actually trying to get them to center the css box under the word that you roll over. I am going to try adjusting the left like you just said! :) Thanks!