Our aim is to make different things as you all know,i maked a new light apple drop down menu.Mainly there is black color apple nav is available on internet.This is dropdown full responsive menu.if you like just follow these steps:-
How to Setup:-
- First open template in html mode
- find ]]></b:skin>
#tbtmenu ul, #tbtmenu li, #tbtmenu span, #tbtmenu a { margin: 0; padding: 0; position: relative; } #tbtmenu:after, #tbtmenu ul:after { content: ''; display: block; clear: both; } #tbtmenu a { color: #333333; display: inline-block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; min-width: 35px; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 #eeeeee; } #tbtmenu ul { list-style: none; } #tbtmenu > ul > li { float: left; } #tbtmenu > ul > li.active > a { background: #d9d9d9 url(http://cssmenumaker.com/sites/default/files/menu/133/grad_light.png) repeat-x left bottom; background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; -moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; -webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; filter: none; } #tbtmenu > ul > li.active a:hover { background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); filter: none; } #tbtmenu > ul > li a { box-shadow: inset 0 0 0 1px #ffffff; -moz-box-shadow: inset 0 0 0 1px #ffffff; -webkit-box-shadow: inset 0 0 0 1px #ffffff; background: #bfbfbf url(http://cssmenumaker.com/sites/default/files/menu/133/grad_light.png) repeat-x left top; background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed)); background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); border-bottom: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; line-height: 34px; padding: 0 35px; filter: none; } #tbtmenu > ul > li a:hover { background: #ffffff url(http://cssmenumaker.com/sites/default/files/menu/133/grad_light.png) repeat-x left bottom; background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); filter: none; } #tbtmenu > ul > li:first-child a { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-left: 1px solid #d2d2d2; } #tbtmenu > ul > li:last-child a { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; } #tbtmenu .has-sub:hover ul { display: block; } #tbtmenu .has-sub ul { display: none; position: absolute; top: 36px; left: -1px; min-width: 100%; text-align: center; *width: 100%; } #tbtmenu .has-sub ul li { text-align: center; } #cssmenu .has-sub ul li a { border-top: 0 none; border-left: 1px solid #d2d2d2; display: block; font-size: 12px; line-height: 120%; padding: 9px 5px; text-align: center; }
<div id='tbtmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul> <li><a href='#'><span>Widgets</span></a></li> <li><a href='#'><span>Menus</span></a></li> <li class='last'><a href='#'><span>Products</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Company</span></a> <ul> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Location</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div>
0 comments:
Post a Comment