•  

    Horizontal 2 niveles 
    Fuente


    <div id="menu">
    <ul>
    <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
    <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
    <li><a href="#">Opción 1.1</a></li>
    <li><a href="http://www.idplus.org">idplus.org</a></li>
    </ul>
    <!--------------------------------------------->
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
    <ul class="dos">
    <li><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>
    <!--------------------------------------------->
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
    <ul class="tres">
    <li><a href="#"></a></li>
    <li><a href="#">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>
    <!--------------------------------------------->
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul class="cuatro">
    <li><a href="#"></a></li>
    <li><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>
    <!--------------------------------------------->
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
    <ul class="cinco">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><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 lte IE 6]></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;
    text-shadow: 0 0 3px #FFf, 0 0 5px #fFF;
    }
    #menu { text-align: center;
    font-size: 0.7em;
    width: 820px;
    margin: 20px auto;
    position: relative;
    }
    #menu ul { list-style-type: none;}

    #menu ul li.nivel1 { float: left;
    width: 162px;
    margin-right: 2px;
    position: relative;
    }
    #menu ul li { float: left;}

    #menu ul li a {display: block;
    text-decoration: none;
    color: #fff;
    background-color: #399;
    border: solid 1px #fff;
    padding: 8px;
    position: relative;
    }
    #menu ul li a:hover, #menu ul li:hover a.nivel1 {
    background-color: #6CC;
    color: #000;
    text-shadow: 2px 2px 4px #000000;
    position: relative;
    border-bottom: solid 1px #6CC;
    }
    #menu ul li a.nivel1 {display: block!important;display: none;
    }
    #menu ul li ul {display: none;
    }
    #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
    position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
    }
    #menu ul li ul li a {width: 160px;
    padding: 6px 0px 8px 0px;
    border: none;
    background-color: #6CC;
    }
    #menu ul li ul li a:hover {
    position: relative;
    text-decoration: underline;
    border-bottom: none;
    }
    table.falsa {border-collapse:collapse;
    border:0px;
    float: left;
    position: relative;
    }
    ul.uno {left: -0px;}
    ul.dos {left: -164px;}
    ul.tres {left: -328px;}
    ul.cuatro {left: -492px;}
    ul.cinco {left: -656px;}

    CSS 2º opción

     

    /*--------- Menu CSS --------------*/
    * { margin: 0px;padding: 0px; outline: 0;
    }
    html, body {
    width: 100%;}
    body {
    background: #366;
    font-family: Verdana, Arial, Helvetica, sans-serif;}
    #menu {
    font-size: 0.7em;margin: 20px;}
    #menu ul { list-style-type: none;}
    #menu ul li.nivel1 { width: 162px;}
    #menu ul li { text-align: center;}
    #menu ul li.primera {
    border-top: solid 1px #FFF;}
    #menu ul li a {display: block;
    text-decoration: none;color: #fff;
    background-color: #399;
    border: solid 1px #fff;border-top: none;padding: 8px 8px 9px;position: relative;}
    #menu ul li:hover {
    position: relative;
    background- color: #6CC;color: #000;}
    #menu ul li a:hover,
    #menu ul li:hover a.nivel1 {
    background-color: #6CC;color: #000;
    position: relative;}
    #menu ul li a.nivel1 {
    display: block!important;
    display: none;position: relative;}
    #menu ul li ul {display: none;}
    #menu ul li:hover > ul {
    display: block;position: absolute;left: 161px;top:-1px;}
    #menu ul li ul li a {
    width: 144px;background-color: #399;
    color: #FFF;position: relative;}
    #menu ul li ul li a:hover {
    position: relative;
    background-color: #6CC;
    color: #000;}
    #menu ul li a.nivel1ie {
    width: 144px;padding: 8px;}
    #menu ul li a.subnivel {padding-bottom: 8px;}
    #menu ul li a:hover ul.nivel2,
    #menu ul.nivel2 li a:hover ul.nivel3,
    #menu ul.nivel3 li a:hover ul.nivel4 {
    display: block;position: absolute;left: 160px;top:-1px;}
    table.falsa {
    border-collapse:collapse;border:0px;
    float: left;}

    CSS 2aº opción

     

    /*--------- 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: 820px;
    margin: 20px auto;
    }
    #menu ul { list-style-type: none;}
    #menu ul li.nivel1 { float: left;
    width: 162px;
    margin-right: 2px;
    }
    #menu ul li a {display: block;
    text-decoration: none;
    color: #fff;
    background-color: #399;
    border: solid 1px #fff;
    padding: 8px;
    position: relative;
    }
    #menu ul li:hover {position: relative;
    }
    #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
    color: #000;
    position: relative;
    }
    #menu ul li a.nivel1 {display: block!important;display: none;
    position: relative;
    }
    #menu ul li ul {display: none;
    }
    #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
    position: absolute;left: 0px;
    }
    #menu ul li ul li a {width: 160px;
    padding: 6px 0px 8px 0px;
    border-top-color: #000;
    }
    #menu ul li ul li a:hover {border-top-color: #000;
    position: relative;
    }
    table.falsa {border-collapse:collapse;
    border:0px;
    float: left;
    position: relative;
    }