Navigation

Menü kódja
 

<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 kód
 

<style type="text/css">
#vertmenu { /* a menü szélessége, betűtípusa, stb */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 250px;
    padding: 0px;
    margin: 0px;
}
#vertmenu ul li a { /* a link színe, stílusa, stb */
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #666666;
    width:257px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus { /* ha ráviszed az egeret a linkre */
    color: #000000;
    background-color: #FBFBFB;
    border: 1px solid #eeeeee;
}
#vertmenu h1 { /* a menü címe, háttere, stb */
    font-family: Times New Roman;
    display: block;
    background-color: #612C61;
    font-size: 18px;
    padding: 10px;
    margin-bottom: 2px;
    color: #f2f2f2;
    width: 250px;
    text-align: center;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}</style>

2 794 megtekintés