Horizontal menus are mostly used in all websites. They are easy to create using simple tutorials as below:

First of all menu is comprising of <ul> <li>. So to make a simple menu you can write following code:

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>

It will show the following result:

  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
  • Menu Item 4

Now we add some CSS at the top of our HTML page as below:

ul {
    list-style: none;
}

Now our list will not have dots in front of each item as below:

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

Now we make them horizontal by adding following code:

ul li{
    float: left;
}

Now our menu will be like:

Menu Item1Menu Item2Menu Item3Menu Item4

But it is not looking good. To make it good we add padding: 3px; as follows:

ul li{
    float: left;
    padding:3px;
}

And also add “|” in between each <li> as follows:

<ul>
<li>Menu Item 1 |</li>
<li>Menu Item 2 |</li>
<li>Menu Item 3 |</li>
<li>Menu Item 4 </li>
</ul>

Now our menu will look like:

Menu Item 1 | Menu Item 2 | Menu Item 3 | Menu Item 4

Our Simple Horizontal Menu is ready.

You can make each li clickable by just adding <a> tag inside each <li></li> as  <li><a href=”www.grasphub.com”>Grasphub</a>|</li> then it will be shown as link in menu.

Final Demo After adding <a> tag

We will discuss how to make attractive CSS HTML in next tutorial.

Have query? post in comments.

How to create simple Horizontal CSS/HTML Menu UG ArticlesProgramming,,
Horizontal menus are mostly used in all websites. They are easy to create using simple tutorials as below: First of all menu is comprising of <ul> <li>. So to make a simple menu you can write following code: <ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul> It will show the following...
Horizontal menus are mostly used in all websites. They are easy to create using simple tutorials as below: First of all menu is comprising of <strong><ul> <li></strong>. So to make a simple menu you can write following code: <pre class="lang:default decode:true"><ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul></pre> It will show the following result: <ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul> Now we add some CSS at the top of our HTML page as below: <pre class="lang:default decode:true">ul { list-style: none; }</pre> Now our list will not have dots in front of each item as below: Menu Item 1 Menu Item 2 Menu Item 3 Menu Item 4 Now we make them horizontal by adding following code: <pre class="lang:default decode:true">ul li{ float: left; }</pre> Now our menu will be like: Menu Item1Menu Item2Menu Item3Menu Item4 But it is not looking good. To make it good we add<strong> padding: 3px; </strong>as follows: <pre class="lang:default decode:true">ul li{ float: left; padding:3px; } </pre> And also add "<strong>|</strong>" in between each <strong><li></strong> as follows: <pre class="lang:default decode:true"><ul> <li>Menu Item 1 |</li> <li>Menu Item 2 |</li> <li>Menu Item 3 |</li> <li>Menu Item 4 </li> </ul> </pre> Now our menu will look like: Menu Item 1 | Menu Item 2 | Menu Item 3 | Menu Item 4 Our Simple Horizontal Menu is ready. You can make each li clickable by just adding <strong><a> </strong>tag inside each <strong><li></li> </strong>as<strong>  <li><a href="www.grasphub.com">Grasphub</a>|</li> </strong>then it will be shown as link in menu. <strong><a href="http://www.grasphub.com/wp-content/uploads/2014/04/index.html" target="_blank">Final Demo After adding <a> tag </a></strong> <em>We will discuss how to make attractive CSS HTML in next tutorial.</em> Have query? post in comments.