Problema con menú css

epinaresg · #1 (**permalink**) 03/11/2011, 21:44

Saludos gente:

Soy nuevo en todo lo que es css y estoy intentando hacer un menú, pero tengo el siguiente problema:

Aqui mi codigo

Código:

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <head>
        <style type = "text/css">
            ul#menu {
                padding: 10px;
            }
            ul#menu li {
                display: inline;
            }
            ul#menu li a{
                width:100px;
                text-decoration: none;
                color: white;
                font-family:Verdana, Geneva, sans-serif;
                background-color: #F00;
                font-size: 12px;
                text-decoration: none;
                float: left;
                padding: 5px;
                border:thin;
                border-style:ridge;
                border-color: #FEFEFE;
                text-align:center;
            }
            ul#menu li a:hover {
                color: white;
                background-color: #00F;
            }
            ul#menu li a:active,
            ul#menu li a:focus {
                color:#fff;
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div id="mainMenu">
            <ul id="menu">
                <li>
                    <a href="#">Inicio</a></li>
                <li>
                    <a href="#">Mi Cuenta</a></li>
                <li>
                    <a href="#">Acerca de</a></li>
                <li>
                    <a href="#">Contáctenos</a></li>
            </ul>
        </div>
    </body>
</html>

Deseo que cuando escoja una opción esta cambie el color de fondo a "negro", pero cuando escoja otra opción esta cambiara el color de fondo a "negro" nuevamente y la anterior volverá a su color original que seria "rojo".

Eh googleado acerca del tema y se recomienda usar la propiedad active, pero no consigo resolver mi problema. Tal vez estoy usándola equivocadamente, así que acudo a ustedes por ayuda.

Gracias de antemano

eZakto · #2 (**permalink**) 04/11/2011, 05:22

Para eso necesitarías JavaScript.

charlyalegret · #3 (**permalink**) 04/11/2011, 08:32

La propiedad active no sirve para lo que tu quieres.

Si se supone que tendrás varias páginas para cada elemento del menú, en cada una de ellas puedes definir un estilo para la sección correspondiente del menú.
por ejemplo, para la página de mi cuenta, pones:

Código HTML:

Ver original<ul id="menu">
                <li class="estiloinactivo">
                    <a href="#">Inicio</a></li>
                <li class="estiloactivo">
                    <a href="#">Mi Cuenta</a></li>
                <li class="estiloinactivo">
                    <a href="#">Acerca de</a></li>
                <li class="estiloinactivo">
                    <a href="#">Contáctenos</a></li>
            </ul>

Para la página de Acerca de pones:

Código HTML:

Ver original<ul id="menu">
                <li class="estiloinactivo">
                    <a href="#">Inicio</a></li>
                <li class="estiloinactivo">
                    <a href="#">Mi Cuenta</a></li>
                <li class="estiloactivo">
                    <a href="#">Acerca de</a></li>
                <li class="estiloinactivo">
                    <a href="#">Contáctenos</a></li>
            </ul>

etc etc, y en css pones las diferencias entre .estiloactivo y .estiloinactivo.
Si usas páginas dinámicas, pues lo puedes poner con variables!

Saludos