HTML Menus list

Creating Menus With HTML list

In this tutorial you can learn that how you create menu for your website. One of the easiest ways for creating menu is unordered list. you can use the un orders list with little Styling with CSS for your menu in HTML.
Now Lest start Writing Steps. First of all create a simple list 



<ul id="list-style">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

It will produced:

Now add some formatting with css as we mention reference id="list-style" in UL tag So we describe List-style in CSS.
Now we create mycss.css file in notepad and first of all write a block code as :


  ul#list-style     {
     margin:20px;
     padding:0;
     list-style:none;
     width:150px;
     }

This code make our list with out any bulit and produced some space between each item.
It will produced:

In next step we make links without underline (text-decoration:none;) and give them a little space with padding property ( padding:5px;). Change the color of text and give some background color (background:#485e49; and color:#eee ). The most important thing we need to add to the links is display setting display link in block ( display:block;). Setting the display property of the links to block , this will expand each link in fix block and to fill parallel. 


  ul#list-style li a
   {
   text-decoration:none;
    display:block;
    padding:5px;
    width:140px;
    background:#485e49;
    color:#eee
   }.

It will produced:

Now give some style to your menu, You can make your menu stylists just giving little change for example give some individual links a border so they look little separate. Now change the color of the anchor text and also the background color. 

	
	ul#list-style

 {
  border:solid #668265;
  border-width:1px 2px 2px 2px;
  }

  ul#list-style li a

 {
  border-top:1px solid #77a487;
  }

  ul#list-style  li a:hover

   {
    background:#a2b3a1;
    color:#000
     }

It will produced:

The fine Code of HTML File and CSS File is as under. just copy the code and try it and them make some changes:
HTML File:


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

<ul id="list-style">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

CSS file with name mycss.css: 


ul#list-style {
margin:20px;
padding:0;
list-style:none;
width:150px;
}

ul#list-style li a {
text-decoration:none;
display:block;
padding:5px;
width:140px;
background:#485e49;
color:#eee
}

ul#list-style {
border:solid #668265;
border-width:1px 2px 2px 2px;
}

ul#list-style li a {
border-top:1px solid #77a487;
}

ul#list-style  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