Függöleges menü 11.

Navigation

• Home
• About Us
• Computing
• Web Sites
• Games
• Links

Html

<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

CSS

<style type="text/css">

#vertmenu { /* a menü szélessége, betűtípusa, stb */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    width: 150px;
    padding: 0px;
    margin: 0px;
}

#vertmenu h1 { /* a menü link címe, háttere, stb */
    display: block;
    background-color: #F2F2F2;
    font-size: 11px;
    padding: 3px 0px 5px 3px;
    margin-bottom: 2px;
    border: 0px solid #000000;
    color: #000000;
    width: 161px;
    text-align: center;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a { /* a link színe, stílusa, stb */
font-size: 80%;
display: block;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus { /* ha ráviszed az egeret a linkre */
    color: #000000;
    background-color: #FBFBFB;
    -moz-border-radius:0.7em;
    -webkit-border-radius: 0.7em;
    border: 1px solid #eeeeee;
}

</style>

A kódokat egyszerű modulban forráskód nézetben kell beilleszteni