Függöleges menü 12.

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: #EBEBEB;
    font-size: 11px;
    padding: 3px 0 5px 3px;
    border: 0px solid #000000;
    color: #0000FF;
    margin: 0px;
    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;
border-bottom: 1px dashed #999999;
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: #eeeeee;
}

</style>

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