css3 - CSS menu with plus -



css3 - CSS menu with plus -

i'm problem css sprites, know best way sprites way doesn't work menu need do.

css code

/* sub menu ----------------------------------------------------------*/ div#sub-menu{ position: relative; float: left; width: 211px; padding: 50px 0px 0px; z-index: 999; } div#sub-menu p{ font-size: 15px; text-transform: uppercase; line-height: 25px; padding: 0px 36px; margin-bottom: 25px; } div#sub-menu ul li{ height: 29px; margin: 2px 21px; border-bottom: 1px #353535 solid; } div#sub-menu ul li:first-child{ border-top: 1px #353535 solid; padding-bottom: 2px; } div#sub-menu ul li:first-child a{ margin: 2px 0px 3px; } div#sub-menu ul li a{ display: list-item; width: 138px; height: 11px; color: #000; text-decoration: none; text-transform: uppercase; font-size: 11px; font-weight: bold; padding: 8px 15px; } div#sub-menu ul li a:hover{ background: #f9c600; color: #fff; }

html code

<div id="sub-menu"> <p>produtos</p> <ul> <li><a href="arroz">arroz</a></li> <li><a href="azeite">azeite</a></li> <li><a href="especiarias">especiarias</a></li> </ul> </div>

i need menu have final plus , still when hover within tag, can give sprite utilize if needed.

can help me on please?

final result needed:

jsfiddle

you can utilize css3 ::after can add together

div#sub-menu ul li a::after{ content:'+'; color:#000; float:right; font-size:14px; line-height:10px; } div#sub-menu ul li a:hover::after{ color:#fff; }

demo : http://jsfiddle.net/p3nq5/4/

css css3

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more