我想知道如何创建一个反转的下拉菜单,而不是下面的列表,列表向上。我目前有一个菜单设置,但我找不到一种方法来反转它。
CSS:
.subtitle
{
width: 612px;
margin: 0 auto;
left: 0px;
background-color:black;
border: 2px solid grey;
position:absolute;
display:inline;
padding: 10px 0px 10px 10px;
top: 765px;
right: 0px;
font-family:"Myriad Pro";
z-index:10;
}
/*Menu CSS */
/* mainnav bar list */
ul.mainNav {
padding: 0px;
margin: 0px;
list-style: none;
height: 30px;
background-color: black;
z-index:25;
}
/* mainnav links */
ul.mainNav li {
text-align:center;
float: left;
width: 150px;
padding-left: 0px;
position: relative;
text-decoration: none;
font-size:18px;
z-index:25;
}
ul.mainNav li a {
display: block;
width: 150px;
color: cyan;
padding-top: 3px;
padding-bottom: 7px;
z-index:25;
}
ul.mainNav li a:hover {
background-color: black;
color:white;
z-index:25;
}
/* subnav layer */
ul.subNav {
padding:0px;
margin:0px;
list-style:none;
position: absolute;
display: none;
z-index:30;
}
ul.subNav li {
display: block;
padding-left: none;
float: left;
text-align: center;
background-color: black;
border-bottom: ridge 1px #4F0000;
z-index:30;
}
/* subnav links */
ul.subNav li a {
float: left;
display: block;
width: 150px;
height: 20px;
padding-top: 9px;
background-color: black;
color: cyan;
font-size: 11pt;
z-index:30;
}
ul.subNav li a:hover {
background-color: black;
color: white;
z-index:30;
}
这是我的菜单HTML
<ul class="mainNav">
<li><a href="Home.html">Home</a></li>
<li>
<!-- span gives clickable area to trigger event handler -->
<span><a href="#">Content</a></span>
<ul class="subNav">
<li><a href="clientside.html">Client Side</a></li>
<li><a href="web.html">Web</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
如果有人能告诉我需要更改或添加以反转菜单,那将非常有帮助!
答案 0 :(得分:0)
您需要设置垂直坐标,此处可以是.subNav
:bottom:30px;
,因为这是nav
条的高度:
您的示例的迷你补丁:
li:hover ul {
display:block;
bottom:30px;
}