读书人

CSS带箭头的领航菜单

发布时间: 2012-10-20 14:12:48 作者: rapoo

CSS带箭头的导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script><title>Menu</title><style type="text/css">ul, li { list-style-type:none; padding:0; margin:0; } #menu { border:1px solid #dedede; height:35px; background:url(bg_out.gif) repeat-x;} #menu li { float:left; line-height:35px; padding-left: 10px;padding-right: 15px;} #menu li div {height: 100%;width: 100%;}.li_out {background:url(arrow_out.gif) no-repeat right center;}.li_over {cursor:hand;background:url(arrow_over.gif) no-repeat right center;color:white;}.div_over {background: url(bg_over.gif) repeat-x;margin-left: -10px;padding-left: 10px;}</style><script type="text/javascript">$(document).ready(function(){$("#menu").children("li").hover(function(){$(this).addClass("li_over");$(this).children("div").addClass("div_over");},function(){$(this).removeClass("li_over");$(this).children("div").removeClass("div_over");});});</script></head><body><ul id="menu"> <li class="li_out"><div>呵呵</div></li> <li class="li_out"><div>呵呵   File</div></li> <li class="li_out"><div>呵呵   Account</div></li> <li class="li_out"><div>呵呵   呵呵呵呵</div></li> <li class="li_out"><div>呵呵   呵呵呵呵</div></li> </ul></body></html>

?

1 楼 墨子宇 2011-11-24 貌似不是带有箭头的

读书人网 >CSS

热点推荐