私はナビゲーションバーを持っています:
<div class="solidblockmenuwrapper">
<ul id="solidblockmenu">
<li class="my_home"><a href="http://www.playerspace.com" class="my_home ">Home</a></li>
<li><a href="/index.cfm/action/features" class="null">Features</a></li>
<li><a href="/faq.cfm" class="null">Contact Us</a></li>
<li><a href="/improved_login.cfm" class="null">Where do I go from here?</a></li>
<li class="my_last"><a href="/logoff.cfm">Sign-Off</a></li>
</ul>
</div>
これがcssです:
.solidblockmenuwrapper{width:1024px;margin:0px 0px 3px 0px;padding:0px 0px 0px 10px;background-color:#CCC;border-top:2px solid #FFFFFF;border-bottom:5px solid #999;overflow:auto;position:relative;border:0px solid green;}
#solidblockmenu ul{list-style-type: none;padding:0px !important;}
#solidblockmenu li{float: left;border-right: 1px solid #FFF;}
#solidblockmenu li a{color: #666;font-weight: bold;text-decoration: none;padding: 10px 10px 10px 10px;display: block !important;}
* html #solidblockmenu ul li a {width: 1%;}
#solidblockmenu li a:hover{color:#FFF !important;background-color:#666;}
#solidblockmenu li a.my_home{padding-left:30px !important;}
#solidblockmenu li a:hover,#solidblockmenu li a.my_current{color:#FFF !important;background-color:#666;}
#solidblockmenu li.my_last {border-right:0px !important;}
#solidblockmenu li a.tryitnow{color:yellow;text-shadow: 2px 2px 2px #666;}
#solidblockmenu li.my_home{margin-left:-30px;}
私の人生では、アンカー要素がテキスト自体の外側でクリックできない理由を理解できないようです。
ここでナビゲーションバーを見ることができます: http://www.playerspace.com