顯示列表 - 李與CSS

HTML如何修改這個代碼在水平線菜單中顯示的列表顯示列表 - 李與CSS

目前在垂直這個代碼顯示我想在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

來源

2014-09-02 Sreeraj

增加。菜單http://codepen.io/anon/pen/DoiFC – 2014-09-02 06:55:49

它爲我的寬度，感謝 – Sreeraj 2014-09-02 07:00:12

試試這個

.metromenu { 
display: block; 
margin: 0 auto; 
position: relative; 
width: 100%; 
z-index: 1; 
}

我改變了寬度從40％到100％。這裏是fiddle。讓我知道這是否有幫助，或者如果您有任何疑問。

編輯我[子菜單修復]：同時設置子菜單的寬度，或者他們將垂直。

.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

來源

2014-09-02 07:01:44

它是工作，謝謝 – Sreeraj 2014-09-02 07:15:19

顯示列表 - 李與CSS

回答

相關問題