http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 19 May 2013 10:16:45 +0000 http://themeshaper.com/forums/topic/styling-sf-menu#post-27730 Sat, 15 Dec 2012 17:56:24 +0000 em hr 27730@http://themeshaper.com/forums/ <p>Please <a href="http://themeshaper.com/forums/topic/please-read-this-before-adding-new-topics-thematic-has-moved"> read this</a> and come to then new <a href="http://thematictheme.com/forums/">ThematicTheme Forums</a> for support. </p> http://themeshaper.com/forums/topic/styling-sf-menu#post-27667 Thu, 01 Nov 2012 13:16:19 +0000 yozz84 27667@http://themeshaper.com/forums/ <p>Now i have this:</p> <pre><code>.skip-link { display:none; background: #6EAF8D; background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); background: linear-gradient(left, white 50%, #6EAF8D 50%); background-size: 50px 25%;; padding: 2px; display: block; height: 2px; overflow: hidden; width: 936px; margin: 0 auto; } #access { font-family: helvetica, arial, serif; font-size: 10px; text-transform: uppercase; text-align: center; overflow: visible; z-index: 100; } .menu a { text-decoration: none; color: #fff; display: block; } .menu ul { list-style: none; position: relative; text-align: left; } .menu li { float: left; } /* clear&#39;n floats */ .menu ul:after { clear: both; } .menu ul:before, .menu ul:after { content: &quot; &quot;; display: table; } /* main ul element */ .menu { position: relative; background: #2B2B2B; background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%); text-align: center; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; -webkit-box-shadow: 2px 2px 3px #888; -moz-box-shadow: 2px 2px 3px #888; box-shadow: 2px 2px 3px #888; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } /* sf-menu */ ul.sf-menu li a { display: block; padding: 10px 15px; border-right: 1px solid #3D3D3D; } ul.sf-menu li:last-child a { border-right: none; } ul.sf-menu li a:hover { color: #000; } /* subs */ ul.sub-menu { position: absolute; z-index: 200; box-shadow: 2px 2px 0 #BEBEBE; width: 35%; display:none; } ul.sub-menu li { float: none; margin: 0; } ul.sub-menu li a { border-bottom: 1px dotted #ccc; border-right: none; color: #000; padding: 10px 15px; } ul.sub-menu li:last-child a { border-bottom: none; } ul.sub-menu li a:hover { color: #000; background: #eeeeee; } /* sub-menu display*/ ul.sf-menu li:hover ul { display: block; background: #fff; } /* keeps the tab background white */ ul.sf-menu li:hover a { background: #fff; color: #666; text-shadow: none; } ul.sf-menu ul li:hover &gt; a{ color: #000; background: #f8f8f8; } /* subs 2nd level */ ul.sub-menu ul { position: absolute; z-index: 300; box-shadow: 2px 2px 0 #BEBEBE; width: 35%; display:block; float: left; } ul.sub-menu ul li{ float: none; margin: 0; } ul.sub-menu ul li a { border-bottom: 1px dotted #ccc; border-right: none; color: #000; padding: 10px 15px; } ul.sub-menu ul li:last-child a { border-bottom: none; } ul.sub-menu ul li a:hover { color: #fff; background: #666; }</code></pre> <p>Problems:<br /> - style second sub menu - 2nd level<br /> - i dont know how to put/style color decor line under menu [Done]<br /> - left and right side of menu dont heighlight when mouse is over like in example page </p> http://themeshaper.com/forums/topic/styling-sf-menu#post-27666 Thu, 01 Nov 2012 13:02:19 +0000 yozz84 27666@http://themeshaper.com/forums/ <p>I would like to have this menu: <a href="http://codepen.io/anon/pen/bdmFz" rel="nofollow">http://codepen.io/anon/pen/bdmFz</a> in thematic theme menu (sf-menu)... but i cant styling this... its not working as should... could someone help me with this? how should it look like? thank you very much. </p>