•  

    2º niveels 4º opción

    <div id="menu">
    <ul>
    <li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
    <!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>
    <!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li class="primera"><a href="#">Opción 2.1</a></li>
    <li><a href="http://www.google.es">Opción 2.2</a></li>
    <li><a href="#">Opción 2.3</a></li>
    <li><a href="#">Opción 2.4</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>
    <!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li class="primera"><a href="http://www.google.es">Opción 3.1</a></li>
    <li><a href="#">Opción 3.2</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>
    <!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li class="primera"><a href="#">Opción 4.1</a></li>
    <li><a href="#">Opción 4.2</a></li>
    <li><a href="#">Opción 4.3</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>
    <!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li class="primera"><a href="#">Opción 5.1</a></li>
    <li><a href="#">Opción 5.2</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    </ul>
    </div>

    CSS

    /*--------- Menu CSS --------------*
    * { margin: 0px;
    padding: 0px; outline: 0;
    }
    html, body { width: 100%;}

    body { background: #366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #menu { text-align: center;
    font-size: 0.7em;
    width: 320px;
    margin: 20px;
    }
    #menu ul { list-style-type: none;
    }
    #menu ul li.nivel1 {
    width: 162px;
    }
    #menu ul li.primera { border-top: solid 1px #FFF;
    }
    #menu ul li a, #menu ul li span {display: block;
    text-decoration: none;
    color: #fff;
    background-color: #399;
    border: solid 1px #fff;
    border-top: none;
    padding: 8px;
    position: relative;
    }
    a:active {position: relative;
    }
    #menu ul li a:active {background-color: #6CC;
    color: #000;
    border-bottom: solid 1px #6CC;
    position: relative;
    }
    #menu ul li span.nivel1 {display: block;
    }
    #menu ul li:hover span.nivel1 {cursor: pointer;
    }
    #menu ul li ul {display: none;
    }
    #menu ul li a:hover ul, #menu ul li a:active ul {display: block;
    position: relative;width: 162px;background-color: #6CC;
    }
    #menu ul li a:link:hover ul {display: none;
    }
    #menu ul li a:active:hover ul {display: block;
    }
    #menu ul li ul li a {width: 160px;
    padding: 6px 0px 8px 0px;
    border: none;
    border-top: solid 1px #fff;
    background-color: #3AB7CB;
    font-weight: normal;
    }
    #menu ul li ul li a:hover {
    position: relative;
    text-decoration: underline;
    border-bottom: none;
    color: #000;
    background-color: #359BB8;
    }
    #menu ul li ul li.primera {border-top: none;
    }
    table.falsa {border-collapse:collapse;
    border:0px;
    float: left;
    position: relative;
    }