横向圆角导航

效果图

素材

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#menu ul{

       font-family:Arial, Helvetica, sans-serif;

       font-size:14px;

       padding:0 0 0 8px;

       margin:0 auto;

       list-style:none;

       height:35px;

       white-space:nowrap;

}

#menu ul li{

       float:left;

       margin:0 2px;

}

#menu ul li a{

       display:block;

       float:left;

       line-height:35px;

       color:#666;

       text-decoration:none;

       padding:0 0 0 14px;

       background:url(sanse.gif);

}

#menu ul li a b{

       display:block;

       padding:0 14px 0 0;

       background:url(sanse.gif) no-repeat right top;

}

#menu ul li a:hover{

       color:#fff;

       background:url(sanse.gif) left center;

}

#menu ul li a:hover b{

       background:url(sanse.gif) right center;

}

#menu ul li.current a{

       color:#fff;

       background:url(sanse.gif) no-repeat left bottom;

}

#menu ul li.current a b{

       background:url(sanse.gif) no-repeat right bottom;

}

#menu ul li.current a:hover{

       background:url(sanse.gif) no-repeat left bottom;

       cursor:default;

}

#menu ul li.current a:hover b{

       background:url(sanse.gif) no-repeat right bottom;

}

</style>

</head>

 

<body>

<div id="menu">

<ul>

       <li><a href="#"><b>Home</b></a></li>

    <li><a href="#"><b>Contact Us</b></a></li>

    <li><a href="#"><b>Web Dev</b></a></li>

    <li><a href="#"><b>Web Design</b></a></li>

    <li class="current"><a href="#"><b>Map</b></a></li>

</ul>

</div>

</body>

</html>

posted @ 2011-10-25 14:26  祈祐  阅读(155)  评论(0编辑  收藏  举报