{ A destination to learn coding }

Make a horizontal scrollable menu bar.

  • Home
  • Blog
  • Reviews
  • Tutorials
  • Work
  • Projects
  • My Takes
  • Technology
  • Articles
  • Contact
  • About
Html Script


<nav>
	<ul>
	 <li>Menu</li>
	 <li>Blog</li>
	 <li>Reviews</li>
	 <li>Tutorials</li>
	 <li>Work</li>
	 <li>Projects</li>
	 <li>My Takes</li>
	 <li>Technology</li>
	 <li>Articles</li>
	 <li>Contact</li>
	 <li>About</li>
	</ul>
</nav>
CSS code

nav{
width:100%;
height:80px;
overflow-x:scroll;
overflow-y:hidden;
}

nav ul{
width:1120px;
height:inherit;
padding:0px;
}	

nav ul li{
width:100px;
height:inherit;
line-height:50px;
background-color:orange;
color:white;
display:inline-block;
float:left;
text-align:center;
border-right:1px solid white;
font-size:20px;
}

nav ul li:hover{
color:orange;
background-color:white;
}
	

overflow property should be used when the width or height of the child tag is exceeding that of parent tag. overflow-x:scroll makes the content scroll in the direction of the x-axis.