[英]Add a vertical Sub menu using css and html
I have a menu drop down list which is done using css and html. 我有一个使用css和html完成的菜单下拉列表。 Now, I want to have an extension of sub menu on the existing sub menu, when I hover the "Audit Report for example, it should show another sub menu vertically. How can I achieve that? This is my existing codes in css and html.
现在,我想在现有子菜单上扩展子菜单,例如,当我将“ Audit Report”悬停在上面时,它应该垂直显示另一个子菜单。我该如何实现?这是我在CSS和HTML中的现有代码。
css CSS
.menuPanel
{
width: auto;
height: 32px;
top: 5px;
border-bottom: 1px solid #808080;
background-color: #4f4545;
}
.nav,.nav ul
{
list-style: none;
margin:0;
padding:0;
}
.nav {
position:relative;
left: 2px;
height: auto;
}
.nav ul
{
height:0;
left:0;
overflow: hidden;
position:absolute;
}
.nav li
{
float:left;
position:relative;
}
.nav li a
{
-moz-transition:1.0s;
-o-transition:1.0s;
-webkit-transition:1.0s;
transition:1.0s;
background-color: #4f4545;
display: block;
color:#FFF;
text-decoration:none;
font-size:12px;
line-height:32px;
padding:0px 30px;
}
.nav li:hover > a
{
background: #8CCA33;
border-color: #6E67A6;
color:#fff;
}
.nav li:hover ul.subs
{
height:auto;
width: 250px;
z-index: 10;
}
.nav ul li
{
-moz-transition:0.3s;
-o-transition:0.3s;
-webkit-transition:0.3s;
opacity:0;
transition:0.3s;
width:100%;
}
.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
.nav ul li a
{
background: #4f4545;
border: 1px solid #808080;
color:#fff;
line-height:1px;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
.nav li:hover ul li a
{
line-height:32px;
}
.nav ul li a:hover
{
background:#8CCA33;
}
aspx page design ASPX页面设计
<ul class="nav">
<li><a href="Home.aspx">HOME</a></li>
<li><a href="#">FILE ▾</a>
<ul class="subs">
<li><a href="TenantFileList.aspx">Tenants List</a></li>
<li><a href="UserFileList.aspx">Users List</a></li>
<li><a href="TenantRental.aspx">Tenant Rental</a></li>
</ul>
</li>
<li><a href="#">REPORTS ▾</a>
<ul class="subs">
<li><a href="#">Audit Reports</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href="#">Leasing Reports</a></li>
<li><a href="#">Marketing Reports</a></li>
</ul>
</li>
<li id="admin" visible="true" runat="server"><a href="#">ADMIN ▾</a>
<ul class="subs">
<li><a href="SystemLogs.aspx">System Logs</a></li>
<li><a href="UserRequest.aspx">User Request</a></li>
</ul>
</li>
<li><a href="Login.aspx">LOG-OUT</a>
</li>
</ul>
</div>
You have to do a new CSS-Style for .nav .subs ul
for the whole block or .nav .subs ul li
for a single element of the block 你必须做一个新的CSS样式的
.nav .subs ul
针对整个块或.nav .subs ul li
的块的单个元素
example: 例:
.nav .subs li ul
{
max-height: 0;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
.nav .subs li:hover > ul
{
max-height: 300px;
height: auto;
}
.nav .subs li ul
{
left: 250px;
top: 0;
overflow: hidden;
}
this just shows the new block, if you hover over a submenu-item, now you only have to style it and place it whereever you want it 这只是显示新块,如果将鼠标悬停在子菜单项上,则现在只需设置样式并将其放置在所需位置即可
Example on JSFiddle: http://jsfiddle.net/4sym7ry0/3/ JSFiddle上的示例: http : //jsfiddle.net/4sym7ry0/3/
Do Nested Unorderlist and orderedlist inside your ListItem 在ListItem内嵌套Unorderlist和orderedlist
Check this For More Info : http://www.thecodingguys.net/blog/css3-create-a-vertical-menu-with-sub-menu 检查此以获取更多信息: http : //www.thecodingguys.net/blog/css3-create-a-vertical-menu-with-sub-menu
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.