Here we create a web page name is horizontalmenu.html to apply on a horizontal menu.
<!doctype html>
<head>
<style type="text/css">
.horimenu{
font-weight:bold;
width:100%
}
.horimenu menu{
padding:6px 0 7px 0;
margin:0;
}
.horimenu li{
display:inline;
}
.horimenu li{
color:red;
padding:6px 3px 4px 3px;
margin-right:20px;
text-decoration:none;
border-bottom:5px solid gray;
}
.horimenu li.hover{
border-bottom-color:black;
color:block;
}
<</style>
</head>
<body>
<h1>Working with Horizontal menu</h1>
<div class="horimenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
Now We have applied different CSS styles on the menu. The output of the above Web page is:
<!doctype html>
<head>
<style type="text/css">
.horimenu{
font-weight:bold;
width:100%
}
.horimenu menu{
padding:6px 0 7px 0;
margin:0;
}
.horimenu li{
display:inline;
}
.horimenu li{
color:red;
padding:6px 3px 4px 3px;
margin-right:20px;
text-decoration:none;
border-bottom:5px solid gray;
}
.horimenu li.hover{
border-bottom-color:black;
color:block;
}
<</style>
</head>
<body>
<h1>Working with Horizontal menu</h1>
<div class="horimenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
Now We have applied different CSS styles on the menu. The output of the above Web page is:
No comments:
Post a Comment