Menu wysuwane - Wersja do druku

Kod:
<style>



ul {

list-style:none; /* usuwamy wypunktowanie listy */

}



#menu  {

margin: 0;

padding: 0; /* usuwamy wszelkie odstępy */

}



#menu li a {

border-left: 1px #2a2a2a solid;

border-right: 1px #585a5b solid;

border-bottom: 1px #585a5b solid;

border-top: 1px #2a2a2a solid;

color: #ffffff;

text-decoration:none;

padding:15px 15px;

background: #333333;

}



#menu li, #menu li a {

float:left;

}



#menu li {

position:relative; /* względem tego będziemy pozycjonowali podmenu */

}



#menu li a:hover {

background: #252627;

}



#menu li ul { /* tutaj odnosimy się do podmenu*/

display:none;

position:absolute;

top:100%; /* wysuwające się podmenu przesuwamy w dół o długość menu-matki */

padding:0;

margin:0; /*usuwamy wszelkie odstępy podmenu*/

}



#menu li:hover > ul { /* selektor > oznacza, że instrukcja obejmuje każdy tag <ul> wewnątrz #menu li */

display:block;

}



#menu li ul li, #menu li ul li a {

float: none;

}



#menu li ul li a {

width: 100px; /* szerokosc wysuwajacego sie podmenu*/

display: block;

}



</style>



<ul id="menu">

    <li><a href="#">Strona Główna</a></li>

    <li><a href="#">Portfolio</a>

        <ul>

            <li><a href="#">Grafika</a></li>

            <li><a href="#">Webdesign</a></li>

        </ul>

    </li>

    <li><a href="#">O mnie</a></li>

    <li><a href="#">Oferta</a>

        <ul>

            <li><a href="#">Cennik</a></li>

            <li><a href="#">Terminy</a></li>

        </ul>

    </li>

    <li><a href="#">Kontakt</a></li>

</ul>