www.webdeveloper.com
Results 1 to 2 of 2

Thread: Hover effects on horizontal dropdown css menu (small problem)

  1. #1
    Join Date
    Mar 2011
    Posts
    2

    Hover effects on horizontal dropdown css menu (small problem)

    Hello, everyone!
    I'm trying to do a horizontal dropdown menu on css.
    As of now, i've managed to style a list of 6 unordered elements, two of them containing an unordered list of their own into blocks of 150px width.
    The background color for the non-hover blocks is blue, and the font color inside is white. If you hover over a block, its background color changes to white and the font color to a light grey.
    The thing is every block works fine on its own, but when i hover over one of the blocks which has an unordered list inside and then hover to one of the items inside, the original block keeps its white hover background color but its font changes back to white (i'd like it to keep its grey value).
    Am i missing something in the "ul li li ul:hover ul..." semantic labyrinth?

    Thank you in advance, guys.
    This is the html and css code i'm using (if anyone needs it):

    _________________________________________

    CSS
    Code:
    @charset "UTF-8";
    #navMenu {
        
        width: 900px;
        margin: 0 auto 0 auto;
        padding: 0;
        border-bottom:1px #000;
        
    }
    
    
    #navMenu ul {
        
        margin: 0;
        padding: 0;
        line-height:30px;
        
    }
    
    #navMenu li {
        
        margin: 0;
        padding: 0;
        list-style:none;
        float:left;
        position:relative;
        background-color:#89bce6;
        
    }
    
    #navMenu ul li a {
        
        text-align:center;
        text-decoration:none;
        height:30px;
        width:150px;
        display:block;
        color:#fff;
    }
    
    #navMenu ul ul {
        
        position:absolute;
        visibility:hidden;
        top:30px;    /*cambiar a 32 si hay borde */
        
    }
    
    #navMenu ul li:hover ul {
        
        
        visibility:visible;
    
    }
    
    #navMenu li:hover {
        
        background-color: #FFF;
        
    }
    
    #navMenu a:hover {
        
        color: #CCC;
        
    }
    
    
    /************************************************************/
    
    .clearFloat {
        clear:both;
        margin:0px;
        padding:0px;
        }
    _________________________________

    HTML
    Code:
    <div id="navMenu">
                
                        <ul>
                            <li><a href="#">La Cl&#237;nica</a></li>
                            <li><a href="#">Equipo</a>
                                <ul>
                                    <li><a href="#">Doctores</a></li>
                                    <li><a href="#">Higienistas</a></li>
                                    <li><a href="#">Material T&#233;cnico</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Servicios</a>
                                <ul>
                                    <li><a href="#">Ortodoncia</a></li>
                                    <li><a href="#">Odontolog&#237;a</a></li>
                                    <li><a href="#">Implantolog&#237;a</a></li>
                                    <li><a href="#">Pr&#243;tesis</a></li>
                                    <li><a href="#">Cirug&#237;a</a> </li>
                                    <li><a href="#">Periodoncia</a></li>
                                    <li><a href="#">Blanqueamiento</a></li>
                                    <li><a href="#">Est&#233;tica dental</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Consejos</a></li>
                            <li><a href="#">Casos Cl&#237;nicos</a></li>
                            <li><a href="#">Programa de Estancias</a></li>
                        </ul>  <!-- end Main ul -->
                        
                        <br class=".clearFloat" />
                
                </div>    <!-- end navMenu div -->
    __________________________
    Last edited by Kor; 03-07-2011 at 06:09 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Mar 2011
    Posts
    5
    You need your <a> color changed but it is not the tag that needs to be hovered for it, the correct tag is <li> while taking effect on the underlying <a> tag;
    so change the last a:hover thingy to:

    Code:
    #navMenu li:hover > a{
        
        color: #CCC;
        
    }
    Let me know if it was useful!

    grtz
    webappr

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles