CSS menu drops up instead of down - css

Question

I have a CSS drop down menu that drops up instead of down. What could be wrong? here is the code and the aspx tags related to the problem. this is inside the master page; also on the pages inside ContentPlaceHolder1 eveything inside tags!
.wrapper {
position:relative; height:25px;
}
.mainmenu {
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
position:absolute;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:absolute;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
// and here is the portion of aspx
<div id="slidemenu" >
<ul id="nav">
<li>Home</li>
<li>History</li>
<li>....</li>
<li>Careers</li>
<li>Contact</li>
<li><span> ... </span> </li>
<li class="list">
<a class="category" href="....aspx"> ... </a>
<ul class="submenu" >
<li>1st drop down menu</li>
<li>2nd drop down menu</li>
</ul>
</li>
</ul>
</div>
<!-- ------------ -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Answer 1

Apply this css to your menu text blocks:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

Answer 2

You should post some code, but I wrote something that may help:
see it in action:
http://jsfiddle.net/HE8uj/
pasted code:
<div class="menu">
<em>hover me!</em>
<ul>
<li> item one </li>
<li> item two </li>
<li> item three </li>
</ul>
</div>
.menu {
font-size: 12px;
width: 100px;
background: #eee;
border: solid 1px black;
margin:1px;
height:20px;
position:relative;
}
.menu * {
display:block;
padding:0; margin:0;
}
.menu em {
padding:5px;
}
.menu ul {
display:none;
}
.menu:hover ul {
display:block;
position:absolute;
width:100%;
bottom:100%; /* change to TOP and it will drop down */
border:solid 1px black;
background: #fff;
}
.menu li {
padding:5px;
}