KOMPOOS.NL

dropdown hover css menu

home » css » dropdown-hover.html

sitemap


voorbeeld dropdown

uitleg van dit css menu

Op de kompoos.nl staat een soortgelijk menu. Kijk even bij http://kompoos.nl/css/text-effects/drop-down-menu.html hoe de code dáár in elkaar zit. Al zien de twee menu's er hetzelfde uit; er zijn toch verschillen. Al is het eind-effect hetzelfde, déze procedure (op deze pagina) gebruikt iets meer (css)code dan op de pagina (achter de link hierboven). De html-code is nagenoeg hetzelfde. Ik laat aan jou over welke procedure je wilt gebruiken. Maar zonder je te willen beïnvloeden, geef ik aan dat mijn voorkeur naar de ándere procedure uit-gaat. Er staan overigens nog meer menu's op de kompoos. Kijk even in de css text directory voor meer voorbeelden.

stylesheet dropdown hover gebeuren


<style type="text/css">
        #dropdown{
                list-style:none;
                font-weight:bold;
                margin-bottom:60px;
                float:left;
                width:100%}
        #dropdown li{
                float:left;
                border-right:1px solid #ffa500;
                position:relative}
        #dropdown a{
                display:block;
                padding:5px;
                color:#fff;
                background:#333;
                text-decoration:none}
        #dropdown a:hover{
                color:#fff;
                background:#070;
                text-decoration:underline}
        #dropdown ul{
                background:inherit;
                list-style:none;
                position:absolute;
                left:-9999px}
        #dropdown ul li{
                border-top:1px solid #ffa500;
                float:none}
        #dropdown ul a{
                white-space:nowrap}
        #dropdown li:hover ul{
                left:-40px}
        #dropdown li:hover a{
                background:#070;
                text-decoration:underline}
        #dropdown li:hover ul a{
                text-decoration:none}
        #dropdown li:hover ul li a:hover{
                background:#333}
</style>

html code van het dropdown menu


<ul id="dropdown">
        <li>
                <a href="/css/dropdown-hover.html">dropdown</a>
        </li>
        <li>
                <a href="/css/dropdown-hover.html">menu</a>
                <ul>
                        <li><a href="/css/dropdown-hover.html">menu item 1</a></li>
                        <li><a href="/css/dropdown-hover.html">menu item 2</a></li>
                </ul>
        </li>
        <li>
                <a href="/css/dropdown-hover.html">hover</a>
                <ul>
                        <li><a href="/css/dropdown-hover.html">hover item 1</a></li>
                        <li><a href="/css/dropdown-hover.html">hover item 2</a></li>
                        <li><a href="/css/dropdown-hover.html">hover item 3</a></li>
                        <li><a href="/css/dropdown-hover.html">hover item 4</a></li>
                </ul>
        </li>
        <li>
                <a href="/css/dropdown-hover.html">cross</a>
                <ul>
                        <li><a href="/css/dropdown-hover.html">cross browser 1</a></li>
                        <li><a href="/css/dropdown-hover.html">cross browser 2</a></li>
                        <li><a href="/css/dropdown-hover.html">cross browser 3</a></li>
                        <li><a href="/css/dropdown-hover.html">cross browser 4</a></li>
                </ul>
        </li>
        <li>
                <a href="/css/dropdown-hover.html">browser</a>
                <ul>
                        <li><a href="/css/dropdown-hover.html">dropdown 1</a></li>
                        <li><a href="/css/dropdown-hover.html">dropdown 2</a></li>
                </ul>
        </li>
</ul>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.