New course! Every coder should learn Generative AI!
Try a free lesson0
How to display list element in Continuous Horizontal(inline) form. Please make a code if u know it . Which can overflow.
Display list element in Continuous Horizontal (inline) form with margin between each element & right border.
4 Answers
+ 17
<style>
*{margin:0; padding:0;}
a{text-decoration:none;}
#menu {
width:100%;
height:50px;
float:left;
}
#main-menu {list-style:none;}
#main-menu li{
background:#ccc;
list-style:none;
float:left;
border:1px solid transparent;
transition:.3s;
position:relative;
}
#main-menu li a{
padding:10px 30px;
float:left;
}
#main-menu > li:hover{
border:1px solid blue;
}
#main-menu > li:hover ul{
visibility:visible;
opacity:1;
}
#main-menu li ul{
position:absolute;
float:left;
left:-1px;
top:39px;
border:1px solid blue;
border-top:none;
width:100%;
visibility:hidden;
opacity:0;
transition:all .3s;
}
#main-menu li ul li{float:none;}
#main-menu li ul li:hover {background:#ccc;}
#main-menu li ul li a{
float:none;
display:block;
text-align:center;
}
</style>
<body>
<div>
<nav>
<ul id="main-menu" >
<li><a href="#" >one</a></li>
<li><a href="#" >two</a></li>
<li><a href="#" >three</a>
<ul>
<li><a href="#" >apple</a></li>
<li><a href="#" >orange</a></li>
<li><a href="#" >melon</a></li>
</ul>
</li>
</ul>
</nav>
</div>
+ 12
Sourabh I edited my answer 👆
I think you want something like number three (when you hover it)
+ 2
Thanks alot Sheida hedayati, but I am look for something else.
Please visit NDTV Web u will see menu list which can overflow .
Home | latest |.........
If u get an idea please share with me how to code this.
Waiting for ur reply
0
Its nice codeing
Often have questions like this?
Learn more efficiently, for free:
Hot today
Why is my code not running
2 Votes
Izzy the Iguana beoblem
1 Votes
Background image
0 Votes
How can I merge the pie chart and the graph into a single sheet and the size should not change
0 Votes
Game Creator
0 Votes
Moderator
0 Votes
Frontend 🥵
0 Votes
Exceptions
1 Votes