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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

    CSS menu - different hover color for each item

    Is this possible?

    I have about 5 items in my menu and I would like them to have a different color when hovering over them.

    Current my html is as follows:-

    Code:
    <div id='menu'>
    				<ul>
       					<li class='active '><a href='index.html'><span>Home</span></a></li>
       					<li><a href='#'><span>About</span></a></li>
       					<li><a href='#'><span>Services</span></a></li>
                        <li><a href='#'><span>My Work</span></a></li>
                        <li><a href='#'><span>Say Hello</span></a></li>
    				</ul>
    			</div>
    CSS:-

    Code:
    #menu ul {margin: 0; padding: 7px 6px 0; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
    #menu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
    #menu a,
    #menu a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;	 text-shadow: 0 1px 1px rgba(0,0,0, .3); }
    #menu a:hover {background: #000; color: #fff;}
    #menu .active a, 
    #menu li:hover > a {background: #ed1e79; color: #FFF; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); }
    #menu ul ul li:hover a,
    #menu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
    #menu ul ul a:hover {background: #8f8f8f url(images/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
    #menu li:hover > ul {display: block;}
    #menu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(images/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
    #menu ul ul li {float: none; margin: 0; padding: 3px; }
    #menu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
    #menu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    * html #menu  ul {height: 1%;}
    If someone could point me in the right direction that would be brilliant

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    116
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi,

    you can add this to your style sheet (create a class to create specifics):

    Code:
    #menu li:hover > a.blue {background: blue;}
    #menu li:hover > a.lavender {background: lavender;}
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <script type="text/javascript">
    
    </script>
    <style type="text/css">
    #menu ul {margin: 0; padding: 7px 6px 0; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
    #menu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
    #menu a,
    #menu a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;	 text-shadow: 0 1px 1px rgba(0,0,0, .3); }
    #menu a:hover {background: #000; color: #fff;}
    #menu .active a, 
    
    #menu li:hover > a {background: #ed1e79; color: #FFF; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); }
    #menu ul ul li:hover a,
    #menu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
    #menu ul ul a:hover {background: #8f8f8f url(images/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
    #menu li:hover > ul {display: block;}
    #menu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(images/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
    #menu ul ul li {float: none; margin: 0; padding: 3px; }
    #menu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
    #menu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    * html #menu  ul {height: 1%;}
    #menu li:hover > a.blue {background: blue;}
    #menu li:hover > a.lavender {background: lavender;}
    </style>
    
    </head>
    <body>
    <div id='menu'>
    				<ul>
       					<li class='active '><a href=#><span>Home</span></a></li>
       					<li><a href='#' class="blue"><span>About</span></a></li>
       					<li><a href='#' class="lavender"><span>Services</span></a></li>
                        <li><a href='#'><span>My Work</span></a></li>
                        <li><a href='#'><span>Say Hello</span></a></li>
    				</ul>
    			</div>
    
    
    </body>
    </html>
    Hope that helps
    Last edited by Brandnew; 05-06-2013 at 07:26 AM.
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • Users who have thanked Brandnew for this post:

    charlyanderson (05-06-2013)

  • #3
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    That did the trick. Thank you so much for explaining how :-)


  •  

    Posting Permissions

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