纯css3带图标和提示信息很漂亮的导航菜单

这个小部件设计使用HTML5和CSS3等web技术。它是完全免费下载的,可以直接使用在你的网站上。它有HTML CSS菜单图标和数据小部件可用于web项目。表单的白色和蓝色背景看起来简单而有吸引力。相关css代码如下，响应式效果请见css样式表.main ul{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,e7e7e7+56 */background: #fcfcfc; /* Old browsers */background: -moz-linear-gradient(top, #fcfcfc 0%, #e7e7e7 56%); /* FF3.6-15 */background: -webkit-linear-gradient(top, #fcfcfc 0%,#e7e7e7 56%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, #fcfcfc 0%,#e7e7e7 56%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */}.main ul li{ display:inline-block; border-right: 1px solid #D0D0D0; float: left;}.main ul li a.tooltip{ padding:1em 0; position:relative;}.main ul li.sub a.tooltip{ background:url(../images/img-sp.png) no-repeat 15px 8px; display: block; height: 40px; width: 105px;}.main ul li.sub a.tooltip:hover { background: url(../images/img-sp.png) no-repeat -114px 8px #1370AB;}.main ul li.sub1 a.tooltip{ background:url(../images/img-sp.png) no-repeat 15px -43px; display: block; height: 40px; width: 105px;}.main ul li.sub1 a.tooltip:hover{ background:url(../images/img-sp.png) no-repeat -114px -43px #1370AB;}.main ul li.sub2 a.tooltip{ background:url(../images/img-sp.png) no-repeat 15px -107px; display: block; height: 40px; width: 105px;}.main ul li.sub2 a.tooltip:hover{ background:url(../images/img-sp.png) no-repeat -114px -107px #1370AB;}.main ul li.sub3 a.tooltip{ background:url(../images/img-sp.png) no-repeat 15px -167px; display: block; height: 40px; width: 105px;}.main ul li.sub3 a.tooltip:hover{ background:url(../images/img-sp.png) no-repeat -114px -167px #1370AB;}.main ul li.sub4 a.tooltip{ background:url(../images/img-sp.png) no-repeat 15px -226px; display: block; height: 40px; width: 105px;}.main ul li.sub4 a.tooltip:hover{ background:url(../images/img-sp.png) no-repeat -114px -226px #1370AB;}.main ul li.sub a.tooltip span{ width: 18px; height: 18px; border-radius: 25px; position: absolute; top: 18%; left: 55%; background: #ea0f19; font-size: 12px; line-height: 1.5em; color: #fff; text-align: center;}.main ul li a.tooltip:hover i{ opacity: 1; bottom:-218%; background: #f9f9f9;}.main ul li a.tooltip i{ width: 165px; height: auto; line-height: 20px; padding: 10px 0 0; left: 30%; margin-left: -64px; font-weight: 400; font-style: italic; font-size: 13px; color:#ea0f19; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;}.main ul li a.tooltip i:before,.main ul li a.tooltip i:after { content: ''; position: absolute; top: -15px; left: 45%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); transform: rotate(180deg);}.main ul li a.tooltip i:after { top: -14px; border-top: 10px solid #fff; transform: rotate(180deg);}.main ul li a.tooltip i ul{ text-align:left; padding:10px; margin:.5em 0 0; background: none;}.main ul li a.tooltip i ul li{ list-style-type:none; border-right: none; margin-bottom:.5em; color: #719DAB; display: block; float: none;}.main ul li a.tooltip i ul li a{ font-size:13px; color:#fff;}.main ul li.sub1 a.tooltip:hover i { bottom:-67% !important;}.main ul li.sub4 a.tooltip:hover i { bottom:-67% !important;}.main ul li.sub1 a.tooltip i,.main ul li.sub4 a.tooltip i{ color: #719DAB; padding: 10px 0;}.main ul li.sub2 a.tooltip:hover i { bottom:-163% !important;}.account a{ padding: 10px 20px; background: #50b308; color: #fff; font-size: 14px; text-decoration: none; display: block; margin: 1.2em 0 0 2.1em; font-weight: 600; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px;}.account a:hover{ background:#ea0f19;}.main ul li:nth-child(6) { border-right:none;}

在线演示        积分下载        6毛下载        砍两刀下载