[英]Make CSS Menu horizontal
我有此CSS菜單,但我需要使其變為水平而不是垂直
我在這里有一個小提琴,所以您可以看到一個示例: http : //jsfiddle.net/WLwxx/1/
這是我正在使用的CSS代碼:
.vertical-nav{
height:auto;
list-style:none;
width: 30%;
margin: 20px 0 0 0;
}
.vertical-nav li{
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100%;
}
.vertical-nav li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul{
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul{
display:block;
}
vertical-nav ul li:hover ul li{
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover{
background-color:#333333;
}
vertical-nav ul li ul li a{
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover{
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {display: block;}
任何想法,我可以做些什么來實現這一目標?
http://jsfiddle.net/isherwood/WLwxx/7
.vertical-nav {
width: 400px;
}
.vertical-nav li {
width: 200px;
}
您可能需要根據情況微調樣式,但這解決了主要問題,即您的列表項為全角。
這是否將您帶向正確的方向?
資料來源: http : //www.overpie.com/css/articles/css-horizontal-fly-out-menu
<div id="menuwrapper">
<ul>
<li><a href="#">My awesome button</a></li>
<li><a href="#">My awesome button</a>
<ul>
<li><a href="#">awesome link nº 1</a></li>
<li><a href="#">awesome link nº 2</a></li>
<li><a href="#">awesome link nº 3</a></li>
</ul>
</li>
</ul>
</div>
您只應編輯css。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.