How to arrange menu horizontally in a webpage using html
To arrange
menus in the webpage horizontally, the following code can be used:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> LISTS
HORIZONTALLY</title>
<link rel="stylesheet"
href="styling.css" type="text/css">
<body>
<div class="nav-bar">
<ul>
<li><a href="index.html"
target:"_blank">HOME</a></li>
<li><a
href="index.html">ABOUT US</a></li>
<li><a
href="index.html">SERVICES</a></li>
</ul>
</div>
</body>
</html>
CSS CODE:
ul
{
display:inline;
list-style: none;
}
li{
display:inline;
}
.nav-bar
{
float:right;
}
.nav-bar ul li a:hover
{
color:#fff;
background-color:green;
padding-top:relative;
}
.nav-bar ul
{
border:1px solid red;
width:auto;
background-color: red;
padding-left:3px;
}
.nav-bar ul li a
{
border-right:1px solid #fff;
}
Inline
is the value of the display property. It works like the <span> property.
List
style takes up the value none so that the bullets used for listing is avoided.
Float
property of the div takes up the value right to align it in the right side of
the page and left to align it in the left side of the page.
Comments
Post a Comment