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应用于菜单文本块：

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

Answer 2

你应该发布一些代码，但我写了一些可能有用的东西：

看到它的实际效果： http://jsfiddle.net/HE8uj/

粘贴代码：

<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;   
}

CSS菜单下降而不是下降

2 个答案: