Hi guys, God I'm retarded when it comes to html/css stuff - need to do a course. Problem I'm having is I changed the background top menu link color to white which makes the dropdown turn to white when you hover over it instead of the color the top menu nav link changes to when hovered over: This is the code currently in place when you hover over prices and contact at: tonbridgephotoshop.co.uk/ /* Theme Name: Ton Bridge Photoshop Theme URI: http://fiverr.com/users/beyondwebpros Author: Beyond Web Pros Author URI: http://fiverr.com/users/beyondwebpros Version: 1.0 Tags: beyondwebpros, psdtohtmlquick, wordpress, wordpress conversion, html to wordpress, psd to wordpress */ /************************** ADDED BY BEYOND WEB PROS **************************/ #navigation {background-color: #FFFFFF; border-bottom: 0px solid #FFF; height: 18px; padding-top: 14px;} /*#navigation ul {list-style: none; margin: 0; padding: 0; text-align: center; height: 29px;} #navigation ul li {display: inline;} #navigation ul li a {background-color: #FFFFFF; border-bottom: 0x solid #fff; color: #DDE0DC; padding: 7px 13px 3px; text-decoration: none;} #navigation ul li.current-menu-item a {background-color: #FFFFFF; border-bottom: 0px solid #9C8D4F; color: #000;} #navigation ul li.current-menu-item:hover a {border-bottom: 0px solid #000;} #navigation ul li a:hover {color: #000; background-color: #c3b59b;}*/ #footer-block .widget-col {width: 274px; padding: 10px 20px; float: left; color: #fff;} .widget-col ul {padding-left: 14px;} .widget-col, .widget-col a, .widget-col p, .widget-col ul li a {font-size: 14px !important; line-height: 1.3em;} .widget-col a {color: #D9D2B4 !important; text-decoration: none !important; line-height: 1.2 em;} .widget-col a:hover {color: #fff !important;} .widget-col h3 {margin: 0; padding: 5px 10px; background-color: #FFFFFF;} .widget-col p {margin: 10px 0;} .art-footer-text {margin: 13px 10px 5px !important;} /************************** ADDED BY BEYOND WEB PROS **************************/ #suckerfishnav {background:transparent; font-size:13px; font-family: 'Arial',Helvetica,Sans-Serif; font-weight:normal; width:100%;} #suckerfishnav, #suckerfishnav ul {float: left; line-height: 20px; list-style: none outside none; margin: -8px 0 0 37px; padding: 0; width: 100%;} #suckerfishnav a {display:block; color:#9C8D4F; text-decoration:none; padding:3px 15px 3px;} #suckerfishnav li {z-index:999; position: relative; float:left; padding:0; background-color: #ffffff; margin-right: 3px;} #suckerfishnav ul {position:absolute; left:-999em; height:auto; width:131px; font-weight:normal; margin:0; line-height:1; border:0; border-top:0px solid #666666;} #suckerfishnav li li {width:129px; border-bottom:0px solid #666666; border-left:0px solid #666666; border-right:0px solid #666666; font-weight:normal; font-family:verdana,sans-serif;} #suckerfishnav li li a {padding:5px 13px; max-width: 90px; font-size: 13px; color: #9C8D4F;} #suckerfishnav li ul ul {margin:-20px 0 0 130px;} #suckerfishnav li li:hover {background:#FFFFFF;} #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {color:#000;} #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#000;} #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#fff;} #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {left:-999em;} #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {left:auto; background:#bbb;} #suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#C3B59B;} Code (markup): Really big massive thanks if someone can kindly advise - in fact I'll right you a 400 word article of your choosing as a thanks!
Hi search for #suckerfishnav li in style.css (/wp-content/themes/tonbridgephotoshop/style.css) and remove 'background-color:#FFFFFF' Then background white issue will resolve..
Add this css, may be this work for you.. #suckerfishnav ul .sub-menu li a:link, #suckerfishnav ul .sub-menu li a:visited{ color:#9C8D4F !important; } #suckerfishnav ul .sub-menu li a:hover{ color:#000000; }
Replace that CSS block with: #navigation {background-color: #FFFFFF; border-bottom: 0px solid #FFF; height: 18px; padding-top: 14px;} /*#navigation ul {list-style: none; margin: 0; padding: 0; text-align: center; height: 29px;} #navigation ul li {display: inline;} #navigation ul li a {background-color: #FFFFFF; border-bottom: 0x solid #fff; color: #DDE0DC; padding: 7px 13px 3px; text-decoration: none;} #navigation ul li.current-menu-item a {background-color: #FFFFFF; border-bottom: 0px solid #9C8D4F; color: #000;} #navigation ul li.current-menu-item:hover a {border-bottom: 0px solid #000;} #navigation ul li a:hover {color: #000; background-color: #c3b59b;}*/ #footer-block .widget-col {width: 274px; padding: 10px 20px; float: left; color: #fff;} .widget-col ul {padding-left: 14px;} .widget-col, .widget-col a, .widget-col p, .widget-col ul li a {font-size: 14px !important; line-height: 1.3em;} .widget-col a {color: #D9D2B4 !important; text-decoration: none !important; line-height: 1.2 em;} .widget-col a:hover {color: #fff !important;} .widget-col h3 {margin: 0; padding: 5px 10px; background-color: #FFFFFF;} .widget-col p {margin: 10px 0;} .art-footer-text {margin: 13px 10px 5px !important;} /************************** ADDED BY BEYOND WEB PROS Edited by James Paterson **************************/ #suckerfishnav {background:transparent; font-size:13px; font-family: 'Arial',Helvetica,Sans-Serif; font-weight:normal; width:100%;} #suckerfishnav, #suckerfishnav ul {float: left; line-height: 20px; list-style: none outside none; margin: -8px 0 0 37px; padding: 0; width: 100%;} #suckerfishnav a {display:block; color:#9C8D4F; text-decoration:none; padding:3px 15px 3px;} #suckerfishnav li {z-index:999; position: relative; float:left; padding:0; margin-right: 3px;} #suckerfishnav ul {position:absolute; left:-999em; height:auto; width:131px; font-weight:normal; margin:0; line-height:1; border:0; border-top:0px solid #9C8D4F;} #suckerfishnav li li {width:129px; border-bottom:0px solid #9C8D4F; border-left:0px solid #9C8D4F; border-right:0px solid #9C8D4F; font-weight:normal; font-family:'Arial',sans-serif;} #suckerfishnav li li a {padding:5px 13px; max-width: 90px; font-size: 13px; color: #9C8D4F;} #suckerfishnav li ul ul {margin:-20px 0 0 130px;} #suckerfishnav li li a:hover {color:#FFF;} #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#000;} #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {left:-999em;} #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {left:auto; background:#9C8D4F;} #suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#9C8D4F;} HTML: You can see the finished result at http://jsfiddle.net/bJykV/
Hi - firstly thanks for being the 1st to reply. Just got back from biz trip so replying to you guys chronologically. There were 5 different 'background-color: #FFFFFF' so wasn't sure which to delete so scrolled down the thread, but yours may well have worked - cheers again anyway - if there was a thanks button i'd hit it!