html 导航下三角,CSS制作一个三角的导航提示效果

本篇文章给大家带来的内容是关于CSS制作一个三角的导航提示效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS制作一个三角的导航提示效果

#menu{width:500px;padding:0;margin:40pxauto;list-style-type:none;}

#menuli{width:100px;float:left;line-height:30px}

#menua{position:relative;display:block;text-decoration:none;background:#cccccc;width:100px;}

#menuaspan{display:block;font-weight:bold;color:#000;border-style:solid;border-width:0px2px2px0px;border-color:#fff#fff#06a#fff;text-align:center;}

#menuaem{display:none;}

#menua:hover{background:#FF0000;}

#menua:hoverspan{color:#fff;}

#menua:hoverem{display:block;overflow:hidden;border:6pxsolid#06a;border-color:#06a#fff;border-width:6px6px06px;position:absolute;left:50%;top:100%;margin-left:-6px;}

CSS教程 CSS布局 CSS兼容性 CSS