I would like to have this menu: http://codepen.io/anon/pen/bdmFz 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.
ThemeShaper Forums » Thematic
[closed]
Styling sf-menu
(3 posts)-
Posted 10 years ago #
-
Now i have this:
.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'n floats */ .menu ul:after { clear: both; } .menu ul:before, .menu ul:after { content: " "; 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 > 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; }
Problems:
- style second sub menu - 2nd level
- i dont know how to put/style color decor line under menu [Done]
- left and right side of menu dont heighlight when mouse is over like in example pagePosted 10 years ago # -
Please read this and come to then new ThematicTheme Forums for support.
Posted 10 years ago #
Topic Closed
This topic has been closed to new replies.