Making vertical menu with CSS

This item was filled under [ News ]

Now i will teach you how to make a simple vertical menu using CSS,first we must add this code after


tag ;

#navcontainer { width: 200px; }

 #navcontainer ul
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;

#navcontainer a
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;

#navcontainer a:link, #navlist a:visited
color: #EEE;
text-decoration: none;

#navcontainer a:hover
background-color: #369;
color: #fff;

after adding the codes above,we can edit our menu’s editing px value of this code

{ width: 200px; }

to change font

“font family;”font names”

to change color

color-“color code”

Now we need the codes below to create our CSS menu


<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”>
<a href=”#” id=”current”>Menü 1</a></li>
<li><a href=”#”>Menü2</a></li>
<li><a href=”#”>Menü3</a></li>
<li><a href=”#”>Menü4</a></li>
<li><a href=”#”>Menü5</a></li>

thats aLL

Be Sociable, Share!
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Comment on “Making vertical menu with CSS”

Leave a Comment