CSS 菜单下拉而不是向下

Question

我有一个 CSS 下拉菜单，它是向上而不是向下下拉的。有什么问题吗？这是与问题相关的代码和 aspx 标签。这是在母版页内；还在 ContentPlaceHolder1 标签内的页面上!

.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><a href="Default.aspx">Home</a></li>
        <li><a href="History.aspx">History</a></li>
        <li><a href="....aspx">....</a></li>

        <li><a href="Careers.aspx">Careers</a></li>
        <li><a href="Contact.aspx">Contact</a></li>
        <li><a href="..."><span> ... </span> </a></li>    
     <li class="list">
 <a class="category" href="....aspx"> ... </a>
 <ul class="submenu" >
  <li><a href="http://www.....com/">1st drop down menu</a></li>
  <li><a href="http://www....com/">2nd drop down menu</a></li>
 </ul>
</li>

</ul>
</div>

<!--    ------------ --> 
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Answer 1

将此 CSS 应用于您的菜单文本 block :

-webkit-transform: rotate(180deg);  
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);