如何修改此代码以在水平线菜单中显示列表
目前此代码以垂直方式显示 我想要水平线形式 如何使其以水平线形式显示列表？
<html><head><style>
.metromenu {
display:block;;
position:relative;
width:40%;
margin:0 auto;
z-index:1;
}
.metromenu, .sub-metromenu {
list-style:none;
}
.metromenu li {
display:inline-block;
float:left;
margin-right:2px;
margin-top:2px;
}
.metromenu a{
display:block;
position:relative;
width:120px;
height:32px;
text-decoration:none;
font-family:'arial';
text-align:center;
letter-spacing:2px;
line-height:26px;
color:#fff;
padding:6px 20px 0 20px;
background-color: hsl(200,70%,50%);
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
}
.metromenu a:hover {
background-color: hsl(200,80%,65%);
}
.metromenu span {
display:inline-block;;
position:absolute;
top:18px;
right:10px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fff;
}
.metromenu li:hover > a{ /* activates link when mouse over sub-metromenu */
background-color: hsl(200,80%,65%);
}
/*sub-metromenu trigger*/
.metromenu li a:hover ~ ul{
opacity:1;
visibility:visible;
}
.sub-metromenu {
opacity:0;
visibility:hidden;
position:absolute;
z-index:10;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
}
.sub-metromenu:hover {
opacity:1;
visibility:visible;
}
.sub-metromenu li a{
background-color: hsl(250,70%,60%);
}
.sub-metromenu li:first-child a{
height:72px;
}
.sub-metromenu li a:hover{
background-color: hsl(250,80%,70%);
}
.metromenu .orange {
background-color: hsl(20,70%,60%);
}
.metromenu .orange:hover {
background-color: hsl(20,80%,70%);
}
.metromenu .green {
background-color: hsl(110,60%,60%);
}
.metromenu .green:hover {
background-color: hsl(110,70%,70%);
}
</style>
</head>
<body>
<div>
<ul class="metromenu">
<li><a href="http://ntools.infoexpo.in/" class="green">Web Tools</a></li>
<li><a href="http://shoponline.infoexpo.in/">Smartphones<span></span></a>
<ul class="sub-metromenu">
<li><a href="#">Latest Smartphones</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ul>
</li>
<li><a href="http://bit.ly/shopindia" class="orange">Others</a></li>
</ul>
</div> </body> </html>
我从这里获取了代码http://codepen.io/maxim/pen/DrvLx
最佳答案
试试这个
.metromenu {
display: block;
margin: 0 auto;
position: relative;
width: 100%;
z-index: 1;
}
我将宽度从 40% 更改为 100%。这是fiddle 。如果这有帮助或者您有任何疑问，请告诉我。
编辑 I [子菜单修复]:同时设置子菜单的宽度，否则它们将垂直。
.sub-metromenu {
opacity:0;
visibility:hidden;
position:absolute;
z-index:10;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
width: 10%;
}
已更新fiddle
关于html - 以水平线显示列表 - 带有 css 的 html 中的 li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25617472/