Back To Top

Learn easy Webdesign with HTML,HTML5,PHP,ASP,XML,SGML,Computer Programming,And many More...

Create HTML Menu Bar using CSS/ HTML

Script of Horizontal Menu and Submenu 

In Post description of linear menu (horizontal menu). Where the “li” elements will be displayed as inline elements, this forces the list to be in one line. The “ul” element has a full width and each hyperlink in the list has a width of 7px. Also we have added some colors to make it interactive.
Code

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Menu bar</title>
<style type="text/css">
ul
{
list-style-type:none;
margin:1;
padding:1;
padding-top:7px;
padding-bottom:5px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#CC3DD;
background-color:#90EE90;
text-align:center;
padding:6px;
text-decoration:italic;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FF1493;
}
</style>
</head>
<body>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#News">News</a></li>
<li><a href="#Sports">Sports</a></li>
<li><a href="#Education">Education</a></li>
<li><a href="#Tips">Tips</a></li>
<li><a href="#Download">Download</a></li>
</ul>
<h1> Example of menu bar </h1>
</body>
</html>

Output

Popular Posts