дисплея в горизонтальной линии - ли в HTML с 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

увеличить ширину .menu http://codepen.io/anon/pen/DoiFC –

Он работал для меня, спасибо – Sreeraj

Попробуйте

.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

источник

2014-09-02 07:01:44

Она работает, спасибо – Sreeraj

дисплея в горизонтальной линии - ли в HTML с CSS

ответ

Смежные вопросы