HTML Horizontal Menu

Creating Horizontal Menu With HTML list

In this tutorial you can learn that how you create horizontal menu for your website. One of the easiest ways for creating menu is horizontal unordered list. you can use the un orders list with little Styling with CSS for your menu in HTML. The only display: inline; and list-style-type: none; to make a basic horizontal list.
Lets begin first write a simple list in HTML .


<ul>
<li><a href="#" >Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

It will be produced the following Result:

Now add some formatting with CSS to display horizontal list.
So we create mycss.css file in notepad and first of all write a block code as :


 #navlist li
     {
      display: inline-block;
   }

Add this mycss.css in Head section of your page. as given below:


<html>
<head>
<link rel="stylesheet" type="text/css" href="c:\new.css" media="screen"/>
</head>

This code make our list horizontal:
learninghints.com
In next step we make our links without underline and give them a little space with padding property and change the text color and background color. 


   ul#navlist li a 
      {
      text-decoration:none;
     padding:10px;
      width:100px;
      background:#485e49;
     color:#eee

       }
#main
{
background:#485e49;
padding:10px;
}

    ul#navlist li a:hover
    {
    background:#a2b3a1;
    color:#000
     }

It will produced:

The finel Code of HTML File and CSS File is as under. jus copy the code and try it and them make some changes:
First create HTML File: 

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="c:\new.css" media="screen"/>
</head>
<body>
<div id="main">
<ul id="navlist">
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

Now Create a mycss.css file:

 
 #main
{
background:#485e49;
padding:10px;
}

ul#navlist li
{
display: inline-block;
}

ul#navlist li a 
{
text-decoration:none;
padding:10px;
width:100px;
background:#485e49;
color:#eee

}
ul#navlist li a:hover
{
background:#a2b3a1;
color:#000
}


Related topics
View and Download More Tutorials !

HTML Forms

HTML DECIMAL Color Code and HEX Color Code

HTML Nested Lists

Elements and Tags In HTML

4 Primary Tags In HTML

Create Your First Web Page in HTML

Attributes in HTML Tags

HTML DOCTYPE Declaration

HEAD Tag in HTML

Meta Tags in HTML

Body Tag in HTML

H1 to H6 HTML Elements

Basic HTML Elements

HTML Table Element

Basefont HTML Element

Formatting Element in HTML

Font Element In HTML

Style Element in HTML

CSS Properties

DIV in HTML Document

List in HTML

Creating Menus With HTML list

Creating Horizontal Menu With HTML list

HTML Image Tag

Hyperlinks In HTML