![](/img/trans.png)
[英]How to make this horizontal menu to vertical menu, so that the menu would be on the right side and the sub-menus on its left side?
[英]In a nested menu, how to make sub menus 100% and aligned to left?
這是一個基本菜單:
http://jsbin.com/aTupIZIp/3/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="nav">
<li><a>Home</a></li>
<li>
<a>Our Staff</a>
<div class="pos-fix">
<ul class="vert">
<li><a>Jon Skeet</a></li>
<li><a>Spiderman</a></li>
</ul>
</div>
</li>
<li><a>Contact Us</a></li>
</ul>
</body>
</html>
body, ul, li, a {
margin: 0;
padding: 0;
}
a {
cursor: pointer;
}
.nav {
list-style: none;
width: 100%;
display: table;
}
.nav li {
display: table-cell;
background: red;
}
.nav a {
display: block;
text-align: center;
padding: 10px;
}
.pos-fix {
position: relative;
}
.nav a:before {
content: '';
display: inline-block;
height: 30px;
width: 30px;
background: url(http://placehold.it/30x30);
float: left;
margin: -5px 0 0 0;
}
.nav a:hover {
background: black;
color: yellow;
}
.nav li:hover .vert {
display: block;
}
.vert {
display: none;
width: 100%;
position: absolute;
}
.vert li {
width: 100%;
display: block;
}
讓我們來看看子菜單(我們的員工/ John Skeet。蜘蛛俠)。 如何將它們設置為100%寬度並向左對齊? 到目前為止,我試圖使其width: 10000px; overflow: hidden;
width: 10000px; overflow: hidden;
但水平滾動條仍然出現。 甚至position: absolute; left: 0;
position: absolute; left: 0;
所有的螺絲釘
做這個:
ul.nav .pos-fix {
left: 0;
margin: 0;
position: absolute;
right: 0;
}
你的pos-fix
div導致了這個問題。 去掉它。
.vert {
display: none;
width: 100%;
position: absolute;
top: 40px;
left:0;
}
.vert li {
width: 100%;
display: block;
text-align: left;
}
.vert a {
text-align: left;
}
.vert a:before {
margin-right: 10px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.