|
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); |
|
|
|
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); |
|
@charset 'UTF-8'; |
|
/* Base Styles */ |
|
#cssmenu, |
|
#cssmenu ul, |
|
#cssmenu li, |
|
#cssmenu a { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
list-style: none; |
|
font-weight: normal; |
|
text-decoration: none; |
|
line-height: 1; |
|
font-family: 'Open Sans', sans-serif; |
|
font-size: 14px; |
|
position: relative; |
|
} |
|
#cssmenu { |
|
width: 250px; |
|
border-bottom: 4px solid #656659; |
|
-webkit-border-radius: 3px; |
|
-moz-border-radius: 3px; |
|
border-radius: 3px; |
|
} |
|
#cssmenu a { |
|
line-height: 1.3; |
|
} |
|
#cssmenu > ul > li:first-child { |
|
background: #66665e; |
|
background: -moz-linear-gradient(#66665e 0%, #45463d 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); |
|
background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); |
|
background: linear-gradient(#66665e 0%, #45463d 100%); |
|
border: 1px solid #45463d; |
|
-webkit-border-radius: 3px 3px 0 0; |
|
-moz-border-radius: 3px 3px 0 0; |
|
border-radius: 3px 3px 0 0; |
|
} |
|
#cssmenu > ul > li:first-child > a { |
|
padding: 15px 10px; |
|
background: url(pattern.png) top left repeat; |
|
border: none; |
|
border-top: 1px solid #818176; |
|
-webkit-border-radius: 3px 3px 0 0; |
|
-moz-border-radius: 3px 3px 0 0; |
|
border-radius: 3px 3px 0 0; |
|
font-family: 'Ubuntu', sans-serif; |
|
text-align: center; |
|
font-size: 18px; |
|
font-weight: 300; |
|
text-shadow: 0 -1px 1px #000000; |
|
} |
|
#cssmenu > ul > li:first-child > a > span { |
|
padding: 0; |
|
} |
|
#cssmenu > ul > li:first-child:hover { |
|
background: #66665e; |
|
background: -moz-linear-gradient(#66665e 0%, #45463d 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); |
|
background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); |
|
background: linear-gradient(#66665e 0%, #45463d 100%); |
|
} |
|
#cssmenu > ul > li { |
|
background: #ffbdf0; |
|
background: -moz-linear-gradient(#ffbdf0 0%, #ff8ae4 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffbdf0), color-stop(100%, #ff8ae4)); |
|
background: -webkit-linear-gradient(#ffbdf0 0%, #ff8ae4 100%); |
|
background: linear-gradient(#ffbdf0 0%, #ff8ae4 100%); |
|
} |
|
#cssmenu > ul > li:hover { |
|
background: #ffaeed; |
|
background: -moz-linear-gradient(#ffaeed 0%, #ff7be1 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffaeed), color-stop(100%, #ff7be1)); |
|
background: -webkit-linear-gradient(#ffaeed 0%, #ff7be1 100%); |
|
background: linear-gradient(#ffaeed 0%, #ff7be1 100%); |
|
} |
|
#cssmenu > ul > li > a { |
|
font-size: 14px; |
|
display: block; |
|
background: url(http://cssmenumaker.com/sites/default/files/menu/273//pattern.png) top left repeat; |
|
color: #ffffff; |
|
border: 1px solid #ff71df; |
|
border-top: none; |
|
text-shadow: 0 -1px 1px #ff24cd; |
|
} |
|
#cssmenu > ul > li > a > span { |
|
display: block; |
|
padding: 12px 10px; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
} |
|
#cssmenu > ul > li > a:hover { |
|
text-decoration: none; |
|
} |
|
#cssmenu > ul > li.active { |
|
border-bottom: none; |
|
} |
|
#cssmenu > ul > li.has-sub > a span { |
|
background: url(http://cssmenumaker.com/sites/default/files/menu/273//icon_plus.png) 96% center no-repeat; |
|
} |
|
#cssmenu > ul > li.has-sub.active > a span { |
|
background: url(http://cssmenumaker.com/sites/default/files/menu/273//icon_minus.png) 96% center no-repeat; |
|
} |
|
/* Sub menu */ |
|
#cssmenu ul ul { |
|
display: none; |
|
background: #fff; |
|
border-right: 1px solid #a2a194; |
|
border-left: 1px solid #a2a194; |
|
} |
|
#cssmenu ul ul li { |
|
padding: 0; |
|
border-bottom: 1px solid #d4d4d4; |
|
border-top: none; |
|
background: #f7f7f7; |
|
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec)); |
|
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%); |
|
background: linear-gradient(#f7f7f7 0%, #ececec 100%); |
|
} |
|
#cssmenu ul ul li:last-child { |
|
border-bottom: none; |
|
} |
|
#cssmenu ul ul a { |
|
padding: 10px 10px 10px 25px; |
|
display: block; |
|
color: #ff00ff; |
|
font-size: 12px; |
|
font-weight: normal; |
|
} |
|
#cssmenu ul ul a:before { |
|
content: '»'; |
|
position: absolute; |
|
left: 10px; |
|
color: #ffbdf0; |
|
} |
|
#cssmenu ul ul a:hover { |
|
color: #ffbdf0; |
|
} |
:D