1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Rep Power

    Stumped please help with menu colors (new to CSS)

    Hi- am creating a website venture2adventure . com

    I am very new to CSS. I am trying to all the sub menus in the main nav bar have a silver back ground with black text when hovered over with the cursor. Everything works fine unless I am on a "page" (e.g. "Planning"), If I am on the planning page the sub and I hover over the sub menu for that page the background is silver and the text is white. I cannot figure out how to make the background silver and the text black for the page I am currently in while hovering over the sub menu.

    Code below:

    /* main site navigation */
    #mainmenu {width:100%;background:url(default/blackmenu.png) no-repeat;}
    .mainnav {font:bold 13px/15px arial,verdana,sans-serif;}
    .mainnav li {float:left;position:relative;background:url(default/bgr_menu_div.png) no-repeat 100% 0;}
    .mainnav li a {color:#fff;padding:18px 16px 17px;}
    .mainnav li a.sf-with-ul {margin-right:10px}
    .mainnav li.first {border-left:none;}
    .mainnav li.first a,.mainnav li.first a:hover{border-left:none;}

    .mainnav li.current_page_item a, .mainnav li.current-cat a, .mainnav li.current-menu-item a {color:#ffffff;text-decoration:none;}
    .mainnav li.current_page_item, .mainnav li.current-cat, .mainnav li.current-menu-item {border-left:none;}
    .mainnav li a:hover{text-decoration:underline;color:#ffffff}
    .mainnav li.current_page_item a:hover {color:#ffffff;text-decoration:underline;}, .mainnav li.current-cat a:hover {color:#ffffff;text-decoration:underline;}, .mainnav li.current-menu-item a:hover {color:#ffffff;text-decoration:underline;}

    .mainnav li ul {border-bottom:1px solid #75725F;position:absolute;z-index:999;width:180px;}
    .mainnav li ul li {float:none;border-left:none;margin:0;padding:0;}
    .mainnav li.current_page_item li a, .mainnav li.current-cat li a, .mainnav li.current-menu-item li a{background:#000000; color:#ffffff;}
    .mainnav li ul li a{background:#000000; color:#ffffff;text-transform:none; font-size:12px;width:136px;padding:5px 27px 5px 15px; height:auto; line-height:normal;margin:0; border:1px solid #75725F; border-bottom:0;}
    .mainnav li ul li a.sf-with-ul { padding:5px 15px;}
    .mainnav li ul li.current_page_item a:hover {background:#f1f1f1;color:#000000 ;text-decoration:none}
    .mainnav li ul li.current-cat a:hover {background:#f1f1f1;color:#000000 ;text-decoration:none}
    .mainnav li ul li.current-menu-item a:hover {background:#f1f1f1;color:#000000 ;text-decoration:none}
    .mainnav li ul li a:hover {background:#f1f1f1;color:#000000 ;text-decoration:none}
    .mainnav li ul ul {margin: -26px 0 0 179px;padding-top:0;}

    .mainnav .sf-sub-indicator {display:none}
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Rep Power
    I'll give you a hint... #ffffff is the hex code for white. Anywhere you see "color: " (without something else like background-) is where you are indicating the color for some text.

    CSS color property

    Last edited by Kravvitz; July 15th, 2013 at 04:12 PM. Reason: replaced the link to w3schools

IMN logo majestic logo threadwatch logo seochat tools logo