Hacer un menu como este

brai_lf · #1 (**permalink**) 22/07/2012, 23:42

hola, me gustaria hacer un menu parecido a este:

http://www.microsoft.com/visualstudi...csharp-express

la idea seria que cuando pasas por arriba de uno de los tips del menu, se despliegue un rectangulo grande del tamaño de todo el menu.

como se lograria esto?

gebremswar · #2 (**permalink**) 23/07/2012, 00:22

Bueno aca tienes muchos ejemplos

Si quieres una estructura html de como maquetarla pues sería:

Código HTML:

Ver original<ul id="menu">
    <li id="home"></li>
    <li id="optios">
        <a href="/options">Optios</a>
        <ul id="sub-nav">
            <li>
                <div id="sub-nav-wrapper"> <!-- este seria el div grande  -->
                    <ul>
                        <li>option 1</li>
                        <li>option 2</li>
                    </ul>
                    <ul>...</ul>
                    <ul>...</ul>
                    ....
                </div>
            </li>
        </ul>
    </li>
    <li id="about"></li>
</ul>

Al menos yo haria uno así y claro con mucho CSS

brai_lf · #3 (**permalink**) 23/07/2012, 00:33

Lo que no se como hacer es lo de que en el hover, ocupe todo el width el rectangulo que se abre

gebremswar · #4 (**permalink**) 23/07/2012, 06:49

Cita:

Iniciado por brai_lf

Lo que no se como hacer es lo de que en el hover, ocupe todo el width el rectangulo que se abre

Bueno, espero que el siguiente ejemplo te ayude a construir tu menú. Y por favor revisa el link de CSS que te adjunté en el mensaje anterior.

Código CSS:

Ver original<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gebremswar</title>
    <style>
        *{margin:0;padding:0;outline:0}
        #wrapper{background:#CECECE; height:400px; margin:0 auto; overflow:hidden; width:700px}
        #menu li{float:left; list-style:none; padding:5px 10px}
        #menu li > ul {opacity:0; float:none; visibility:hidden}/*oculta los ul como el de la linea 23*/
        #menu li:hover{background:#E9E980}
        #menu li:hover > ul{opacity:1; visibility:visible}/*¡Atento aquí!*/
        #sub-nav{background:#E9E980; left:165px; padding:25px; position:absolute; width:643px}
        #sub-nav li{float:none}
        .sn-column{margin:0 200px 0 0; float:left}
    </style>
</head>
<body>
<div id="wrapper">
    <ul id="menu">
        <li id="home">HOME</li>
        <li id="options">OPTIONS
            <ul> <!-- éste es el elemento oculto -->
                <li>
                    <div id="sub-nav">
                        <ul class="sn-column">
                            <li>option  A1</li>
                            <li>option  A2</li>
                            <li>option  A3</li>
                        </ul>
                        <ul class="sn-column">
                            <li>option  B1</li>
                            <li>option  B2</li>
                            <li>option  B3</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
        <li id="about">ABOUT</li>
    </ul>
</div>
</body>
</html>