想了一个纵向菜单，而且用在了自己的blog上。 在这里发一下，见笑了。不过看上去有些变扭，可能不适合用来做内容的导航。
这是从横向的选项卡菜单想到的，使用left:-1遮住了content的border。

<style type="text/css"> #content { width:500px; height: 500px; float: left; background: #fff; border: 1px solid #8ab3d2;} #nav { margin: 15px 0 0 0; float: left; padding: 0;} #nav li { text-align: left; margin-bottom: 4px; list-style:none; } #nav a { width: 125px;background: #fff; color: #333; text-decoration:none; display: block; padding: 6px 0px 6px 45px; border: 1px solid #8ab3d2; border-left: 0px;} #nav a:hover, #nav a:active, li.current_page_parent a, li.current_page_parent a:visited, li.current_page_item a:hover, #nav li.current_page_item a:hover, #nav li.current_page_item a, #nav li.current_page_item a:visited { position: relative; left: -1px; margin-right: 15px; background: #fff; color: #333; font-weight: bold; padding-left: 35px; } </style> <div id="content"> 内容页面 </div> <ul id="nav"> <li class="page_item current_page_item"><a href="http://www.5jway.com" title="HOME">首页</a></li> <li class="page_item page-item-2"><a href="#" title="关于">页面一</a></li> <li class="page_item page-item-3"><a href="#" title="关于">页面二</a></li> <li class="page_item page-item-4"><a href="#" title="关于">页面三</a></li> <li class="page_item page-item-5"><a href="#" title="关于">页面四</a></li> </ul>
 提示：您可以先修改部分代码再运行

[ 本帖最后由 xiyao 于 2008-6-8 17:12 编辑 ]

不错哎。鼓励了~~！

有些别扭！
因为你的链接触发样式跟当前触发过首页链接样式一样！所以当触发新链接时两个链接对应的都是一个内容块，会让人别扭

只有导航菜单，没有内容的切换，还不能成为选项卡。

形式上看起来很像选项卡，但是用到实际中就不行啦，建议楼主还是实际点比较好些呀，呵呵

我只是提取了其中的html,和css,  在wordpress中可以很方便的实现选项卡，但我不会用js实现。
这个确实不实际，不常用，影响用户习惯。但我总觉得有些地方可以用到。

这东西用js简单些，
而且没有js没什么太大意思,          如marvellous所说,

申请使用 ....  呵呵  谢谢

dingf