LinuxSir.cn,穿越时空的Linuxsir!

 找回密码
 注册
搜索
热搜: shell linux mysql
查看: 1159|回复: 1

发个==CSS 菜单== ~~~~~~~

[复制链接]
发表于 2007-7-14 07:15:20 | 显示全部楼层 |阅读模式
用JS做菜单?太危除了,可能得不到执行机会的噢。

我做了很多实验,做出个DHTML菜单,只是不太好看。拿出来分享。

也好来个抛砖引玉。有更好的例子,老大们可不要藏私...

只是一个思路,且在不同浏览器上效果并不同,好在还是可以出现弹出菜单的:confused: :confused:

<style>
#menubody {text-align: center; font-size: 14;border-collapse: collapse;position:absolute;}
#menubody :hover {boder: 1px #808080;}
#menubody TD {border:2 #808080;}
#menubody a {text-decoration: none; display: block; height: 100%; padding-top: 0;}
#menubody a span{background: #f0f0f0;display: none;}
#menubody a:hover{color: #ff0000; background: #f0f0f0; border-left: 0 double #808080; border-right: 1 double #808080; border-top:1 #808080;}
#menubody a:hover span{display: block; top: 0; left:0; padding: 0; background: #f0f0f0;}

#menuitem a:hover {background-color:#a0a0a0;border-left:0;border-right:1;border-bottom:1; padding:0;}
#menuitem TR:hover{}
</style>
<br>
<br>
<br>


<span style="position:relative;">
<TABLE id="menubody" cellspacing="0" cellpadding="0" border="0" alight="left" width=300>
<TR>
<TD width=50%><a href="#">Menu1<span style="position:relative;border-collapse: collapse;">
        <table id="menuitem" cellspacing="0" cellpadding="0" border="0" width=100%>
        <tr><td width=20% style="background-color:#808080;"></td>
            <td width=80%><a href="##">menu item1-1</a></td>
        </tr>
        <tr><td width=20% style="background-color:#808080;"></td>
            <td width=80%><a href="##">menu item1-2</a></td>
        </tr>
        </table>
</span></a></TD>
<TD width=50%><a href="#">Menu1<span style="position:relative;border-collapse: collapse;">
        <table id="menuitem" cellspacing="0" cellpadding="0" border="0"  width=100%>
        <tr><td width=20% style="background-color:#808080;"></td>
            <td width=80%><a href="##">menu item1-1</a></td>
        </tr>
        <tr><td width=20% style="background-color:#808080;"></td>
            <td width=80%><a href="##">menu item1-2</a></td>
        </tr>
        </table>
</span></a></TD>
</TR>
</TABLE>
<BR>
</span>
it is a test.
it is a test2.
it is a test3.
it is a test4.
<br>
it is a test.
it is a test2.
it is a test3.
it is a test4.
<br>
it is a test.
it is a test2.
it is a test3.
it is a test4.
<br>
it is a test.
it is a test2.
it is a test3.
it is a test4.
发表于 2007-8-14 16:50:15 | 显示全部楼层
呵呵 不错~
就喜欢这样简洁明了的 哈哈~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表