http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 19 May 2013 07:20:58 +0000 http://themeshaper.com/forums/topic/menu-divider-bar-still-visable-on-hover#post-13182 Thu, 17 Jun 2010 18:22:13 +0000 Evenrude 13182@http://themeshaper.com/forums/ <p>Thank you for the reply.</p> <p>We want to keep the dividers in between all of the menu items, except for the far left one (gallery). If I omit that line all of them will disappear. The gallery link has a class of ".page-item-7" so I was trying to remove it on only that item.</p> <p>I may try using the border... originally my friend was wanting a tapered line, so I was trying to use an image. </p> <p>Thanks again. </p> http://themeshaper.com/forums/topic/menu-divider-bar-still-visable-on-hover#post-13181 Thu, 17 Jun 2010 17:30:06 +0000 Paulo 13181@http://themeshaper.com/forums/ <p>If I understand it right;</p> <pre><code>.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color:transparent; background-image:url(&quot;images/menu_divider.jpg&quot;);/* remove this line of code and the divider will be gone */ background-position:left bottom; background-repeat:no-repeat; color:#620D14; text-decoration:underline;}</code></pre> <p>And why using images when yo can use border property? More here <a href="http://www.w3schools.com/css/css_border.asp" rel="nofollow">http://www.w3schools.com/css/css_border.asp</a> </p> http://themeshaper.com/forums/topic/menu-divider-bar-still-visable-on-hover#post-13161 Thu, 17 Jun 2010 03:58:00 +0000 Evenrude 13161@http://themeshaper.com/forums/ <p>I am working on a menu for friends website... and am still very new to designing.</p> <p>Anyhow, I figured out how to put a divider in between menu items using:</p> <p><code><br /> .sf-menu a {<br /> background-image: url(images/menu_divider.jpg);<br /> background-repeat: no-repeat;<br /> background-position: left bottom;<br /> etc......<br /> </code></p> <p>But, he wants the far left divider bar to be gone. Using firebug I found the class for that menu item to be ".page-item-7 "</p> <p>I then did this:</p> <p><code><br /> .page-item-7 a {<br /> background-image: none;<br /> }<br /> </code></p> <p>I thought YAHTZEE! I got it.. till I hovered over it and saw the bar grow back.</p> <p>I have tried all kinds of :hover, :focus, CSS to no avail... It's probably something simple, but after a couple hours thought I would try here. Thank you in advance if anyone can help...</p> <p>The test site is here: <a href="http://www.kipp.theperimeterweb.com/wordpress/" rel="nofollow">http://www.kipp.theperimeterweb.com/wordpress/</a> </p>