Question

如何修改此代码以在水平线菜单中显示列表

目前此代码以垂直方式显示我希望它以horizonyal线形式如何以水平线形式显示列表？

<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

Answer 1

试试这个

.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

以水平线显示列表 - 使用css在html中显示li

1 个答案: