{youku}id_XMjU5MjkxOTk2.html{/youku}

The best way to create CSS menus is by using the unordered list <ul> tag in HTML

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

Will look like this:

• First
• Second
• Third

To adust it, we need to format the following tags:

<ul>
<li>
<a> The <a> anchor tag has three different instances:
a:hover {}
a:active {}
a:visited {}

My Basic CSS Menu Code

This is a link to some basic menu styles

This is my simplified code for these menu items. You can add and edit this to suit your page. Just copy and paste into your CSS file.

#menu
{
width:200px;
height:300px;
background-color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
padding-top:15px;
}

ul
{
list-style-type:none;
margin-top:15px;
margin-left:0px;
}

li
{
text-align:center;
}

a
{
text-decoration:none;
color:#000000;
display:block;
width:120px;
background-color:#999999;
margin:3px;
padding-top:4px;
padding-bottom:4px;
border: 1px solid #000000;
}

a:hover
{
text-decoration:underline;
background-color:#666666;
}

a:active
{
text-decoration:underline;
color:#FFFFFF;
background-color:#666666;
}

Explanation:

The #menu div is just a box for the list to go into.
padding-top:15px; A few issues with Internet Explorer and Firefox here. I hope to explain this in another chapter.

ul
margin-top is to give room at the top
margin-left clears the list's default indent
list-style-type clears the lists graphic default (dots)

li
text-align centers the text.

a
text-decoration: clears the underline from the link
color:This is the font's color
display:block; This is important
margin: gives space around your display block
padding:gives space inside your block
border: This creates a solid black line of 1px

a:hoverThis is the mouse over action

a:activeThis is the active link, the one you're visiting

a:visited I'm not using this, but shows the formatting for a visited link

Horizontal Menus

Just a few alterations to create a horizontal menu.

#menu
{
width:600px;
height:45px;
background-color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
}

ul
{
text-decoration:none;
margin:5px;
}

li
{
display:inline;
}

a
{
text-decoration:none;
float:left;
color:#000000;
display:block;
width:120px;
background-color:#999999;
margin:3px;
padding-top:4px;
padding-left:5px;
padding-bottom:4px;
border: 1px solid #000000;
}

a:hover
{
text-decoration:underline;
background-color:#666666;
}

a:active
{
text-decoration:underline;
color:#FFFFFF;
background-color:#666666;
}

Expanation

Very similar to the vertical menu. The only important differences are:

li
{
display:inline;
}

and in the anchor <a> tag

a
{
float:left;
}