标签:style blog http io ar color os sp on
$(function () { var y = $(‘.p‘).length,r=15,h=50; var wa = document.documentElement.clientWidth; $(‘body‘).css(‘width‘, wa - h).css(‘overflow‘, ‘auto‘); $(‘#menu li‘).css(‘width‘, (wa - h) / y - r); $(‘#menu li‘).mouseover(function () { if ($(‘.p‘).index(this) == (y - 1)) { $(‘.p div div‘).css(‘position‘, ‘absolute‘).css(‘left‘, -((wa - h) / y - r) + ‘px‘).css(‘top‘, ‘0px‘); } else { $(‘.p div div‘).css(‘position‘, ‘absolute‘).css(‘left‘, ((wa - h) / y - r) + ‘px‘).css(‘top‘, ‘0px‘); } }); $(window).resize(function () { setR() }); }); function setR() { var wa = document.documentElement.clientWidth; $(‘body‘).css(‘width‘, wa - h).css(‘overflow‘, ‘auto‘); $(‘#menu li‘).css(‘width‘, (wa - h) / y - r); }
css代码:
#menu{margin:0px;padding:0px;} a{ text-decoration:none;} .p{float:left; width:150px; background-color:#0072E3; height:40px; list-style:none; border:1px solid #fff; text-align:center;line-height:40px;position:relative;} .p li{ width:150px; background-color:#0072E3; height:40px; list-style:none; border-bottom:2px solid #0066CC; border-top:1px solid #66B3FF; border-left:1px solid #0066CC; border-right:1px solid #0066CC; text-align:center;line-height:40px;position:relative;display:block;} span{color:White;} .p div{ visibility:hidden;} .p div div{ visibility:hidden;} .p ul li{ float:none;} ul .p:hover>div{ visibility:visible;} ul .p:hover{background-color:#46A3FF;} ul .p ul li:hover>div{ visibility:visible;} ul .p ul li:hover {background-color:#46A3FF;} ul .p ul li>div{ position:absolute;right:-1px; top:0px;} #menu div ul{margin:0px;position:absolute;left:-1px;padding:0px;}
html代码:
<div id="menu"> <ul> <li class="p"><span>第一</span> <div> <ul> <li><a href="#"><span>1-1</span></a></li> <li><a href="#"><span>1-2</span></a></li> <li><a href="#"><span>1-3</span></a></li> <li><a href="#"><span>1-4</span></a></li> </ul> </div> </li> <li class="p"><span>第二</span> <div> <ul> <li><span>2-1</span> <div> <ul> <li><a href="#"><span>2-1-1</span></a></li> <li><a href="#"><span>2-1-2</span></a></li> <li><a href="#"><span>2-1-3</span></a></li> <li><a href="#"><span>2-1-4</span></a></li> <li><a href="#"><span>2-1-5</span></a></li> <li><a href="#"><span>2-1-6</span></a></li> <li><a href="#"><span>2-1-7</span></a></li> <li><a href="#"><span>2-1-8</span></a></li> </ul> </div> </li> <li><span>2-2</span></li> <li><span>2-3</span> <div> <ul> <li><a href="#"><span>2-2-1</span></a></li> </ul> </div> </li> <li><span>2-4</span></li> </ul> </div> </li> <li class="p"><span>第三</span></li> <li class="p"><span>第四</span> <div> <ul> <li><span>4-1-1</span> <div> <ul> <li><a href="#"><span>4-1-1-1</span></a></li> <li><a href="#"><span>4-1-1-2</span></a></li> </ul> </div> </li> <li><a href="#"><span>4-1-1</span></a></li> <li><a href="#"><span>4-1-2</span></a></li> <li><a href="#"><span>4-1-3</span></a></li> <li><a href="#"><span>4-1-4</span></a></li> </ul> </div> </li> <li class="p"><span>第五</span></li> <li class="p"><span>第六</span> <div> <ul> <li><span>6-1-1</span> <div> <ul> <li><a href="#"><span>6-1-1-1</span></a></li> <li><a href="#"><span>6-1-1-2</span></a></li> <li><a href="#"><span>6-1-1-3</span></a></li> <li><a href="#"><span>6-1-1-4</span></a></li> <li><a href="#"><span>6-1-1-5</span></a></li> </ul> </div> </li> <li><a href="#"><span>6-1-1</span></a></li> <li><a href="#"><span>6-1-2</span></a></li> </ul> </div> </li> </ul> </div>
标签:style blog http io ar color os sp on
原文地址:http://www.cnblogs.com/dayuhw/p/4123404.html