点線効果水平CSSメニュー

プレゼンテーション効果のスクリーンショット

使用する画像

CSSコード

<style type="text/css">

<!--

body {margin:0;padding:0;font-family: verdana, sans-serif;

font-size: 11px;background: #f7f7f7;}

.container {width: 650px;height:200px;padding:20px;

border:1px solid #ccc;background: #fff;}

#roscripts_m4 {margin: 0;padding: 0 0 22px 0;}

#roscripts_m4 li {margin: 0;padding: 0;display: inline;

list-style-type: none;}

#roscripts_m4 a:link, #roscripts_m4 a:visited {float: left;font-size: 10px;

line-height: 16px;font-weight: bold;padding: 6px 22px 6px 22px;

text-decoration: none;color: #708491;border-left:1px solid #9FB1BC;

border-bottom: 1px solid #9FB1BC;}

#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, 

#roscripts_m4 a:hover {padding-bottom: 6px;color: #000;background: url(m4.gif);}

-->

</style>

HTMLコード

<div class="container">

<ul id="roscripts_m4">

<li><a href="http://www.865171.cn">Home</a></li>

<li><a href="http://www.865171.cn">Products</a></li>

<li><a href="http://www.865171.cn">Services</a></li>

<li><a class="active" href="http://www.865171.cn">www.865171.cn</a></li>

</ul>

</div>