Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Different hover color for each menu item?

    Trying to figure out how to make my horizontal menu have different hover colors for each menu item.

    Here's the CSS: (currently has one hover color)

    Code:
    /* HORIZONTAL MENU */
    #menumoo{padding:0; margin:0;float:left; width:1000px; background:url(img/menu_bg.gif); height:32px;}
    #menumoo ul{ background:url(img/menu_bg.gif); float:right; list-style-type:none; display:inline-block;height:32px;padding:0; margin:0;}
    #menumoo li{float:right; display:inline-block; text-align:center; height:32px}
    #menumoo li img{display:inline-block;}
    #menumoo  a{padding:7px 10px 5px 10px; text-decoration:none; color:#fff; background:url("img/menu_seperator.gif") bottom left no-repeat; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;display:inline-block;height:20px;text-shadow: 0px 2px 3px #000;}
    #menumoo a:hover{padding:7px 10px 5px 10px; color:#eee; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;display:inline-block; height:20px; background:#41a0ff  url("img/menu_seperator.gif") bottom left no-repeat;}
    /* END HORIZONTAL MENU */
    And here's the HTML:
    Code:
    			
    <div id="menumoo">
    					<!--NAVIGATION-->
    					<ul>
    					<li><a href="/seasonal.php">Small Animals</a></li>
    					<li><a href="/reptile.php">Reptiles</a></li>
    					<li><a href="/deal_of_the_day.php">Fish</a></li>
    					<li><a href="/western.php">Birds</a></li>
    					<li><a href="/english.php">Cats</a></li>
    					<li><a href="/catalog.php">Dogs</a></li>
    					</ul>
    			</div><!--end menu div-->
    Thanks in advance.

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    you can do like this: (using attribute selector)
    #menumoo a[href^="/seasonal"]:hover {}
    ...

    ^= means: begin with
    However, it doesn't work well in IE6 and earlier.

    Also, you can add class="..." to the 'a' tag so as to distinguish them by class name instead of 'a'

  • Users who have thanked mehere8 for this post:

    Aquarii (05-06-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, i'm just newbie too

    i have to try make a class for


    ul li a:hover.yourclass


    that's use in your css . okay i will give you a simple way how to make any class .

    ul
    {
    list-style : none;
    padding : 5 0 0 0;
    float : left;
    margin : 0;
    }

    ul li
    {
    list-style : none;
    padding : 10 0 0 20;
    float : left;
    margin : 0;
    }

    ul li a
    {
    text-decoration : none;
    }

    ul li a:hover.red
    {
    color : red;
    }

    ul li a:hover.green
    {
    color : green;
    }

    ul li a:hover.yellow
    {
    color : yellow;
    }
    and this code bellow used in your html file

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/menu.css"/>
    <title>
    horizontal menu hover
    </title>
    </head>

    <body>

    <!-- make horizontal menus -->
    <ul>
    <li><a href="http://google.com" class="red"> Google </a></li>
    <li><a href="http://yahoo.com" class="green"> Yahoo! </a></li>
    <li><a href="http://kaskus.us" class="yellow"> kaskus </a></li>
    </ul>

    </body>
    <html>
    if you have some question , you can reply to this thread again or just PM me .

    hope will solve your problem .

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks that worked!

    edit: @mehere8


  •  

    Posting Permissions

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