Ad Code

Create HTML Menu Bar using CSS/ HTML

June 20, 2016
Advertisements

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

Download Link
Advertisements