Creating Horizontal Menu

Creating a Horizontal Menu with CSS

In previous topics, formatting list elements and creating vertical menus were explained. In this example, a horizontal menu is created by formatting a ul list.

Check out the example below.

The most important difference from vertical menu construction is the float:left property applied to li tags. In this way, li labels that are normally placed one under the other are placed side by side.

Html Part:

<li><a href="#">Our Projects</a></li>

<li><a href="#">Our Completed Projects</a></li>

<li><a href="#">Our References</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact</a></li>

</ul>

Css Part:

.topMenu{

list-style-type: none; /* We removed the bullet */

border: 2px solid #0080C0;

margin: 0px;

padding: 0px;

}

.topMenu li{

float: left; /* We made the li elements to be placed side by side */

}

.topMenu li a{

display:block; /* explanation exists on vertical menu */

font-weight: bold;

color: #0080C0;

text-decoration: none;

margin: 0px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

}

.topMenu a:hover{

color: #FFF;

background-color: #0080C0;

}

Creating a horizontal menu with css, css horizontal menu, css menu examples, placing li labels side by side

EXERCISES

CSS Horizontal Menu Tutorial

Try It

By clicking the Try It button, you can see the sample drop-down menu and try it yourself by changing your codes.

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Projelerimiz</a></li>

<li><a href="#">Biten Projelerimiz</a></li>

<li><a href="#">Referanslarımız</a></li>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">İletişim</a></li>

</ul>

Creating Horizontal Menu

Creating a Horizontal Menu with CSS

EXERCISES

COMMENTS