Is there a way to modify this code so that the list is displayed in a horizontal line menu?
Currently, the code displays the list vertically but I want it to be displayed in a horizontal line. How can I achieve this?
<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>
The original code was taken from here http://codepen.io/maxim/pen/DrvLx