企业网站常用导航菜单

稿源：互联网 2022-06-17 18:33:01 点击： 1394 撤稿纠错

企业网站常用的横向导航菜单，觉得不够漂亮可以自己修改css样式。

以下讨论的是和相关的企业网站常用导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<style>
/*下拉菜单样式*/
*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/
#zzjs_net { line-height: 20px; list-style-type: none; margin-top:5px;}         /*控制一级菜单行高；上边距5px；*/
#zzjs_net a { display: block; width: 77px; text-align:center; font-size:12px;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/
#zzjs_net a:link  { color:#FFF; text-decoration:none;margin:0;}     /* 未访问的链接 */
#zzjs_net a:visited  {color:#FFF;text-decoration:none;margin:0;}    /* 已访问的颜色 */
#zzjs_net a:hover {color:#C00;text-decoration:none;}                /* 鼠标在链接上 */
#zzjs_net li {float: left;}                   /* 一级菜左对齐 */
#zzjs_net li a:hover{background:#FFFFFF;}     /* 鼠标在一级菜单上改变其背景色 */
#zzjs_net li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}             /*二级菜单总体样式：行高24px；背景颜色；外框宽度；相对位置；边框一个象素，上边没样式，左右下边实线，边框颜色#003399；内边距1个象素*/
#zzjs_net li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}                 /* 二级菜单链接样式；背景宽度、左对齐，左缩进2 */
#zzjs_net li ul a:link  {color:#0d5097; text-decoration:none;}                                   /* 未访问的链接 */
#zzjs_net li ul a:visited  {color:#0d5097;text-decoration:none;}                                 /* 已访问的链接 */
#zzjs_net li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}/* 鼠标在链接上 */
#zzjs_net li:hover ul {left: auto;}
#zzjs_net li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<script type=text/javascript>
</script>
<div id=div_center>
<UL id="zzjs_net">
<LI style="MARGIN-LEFT: 10px"><A href="http://www.zzjs.net">网站首页</A></LI>
<LI><A href="http://www.zzjs.net">站长特效</A>
<UL>
<LI><A href="http://www.zzjs.net/">导航菜单</A></LI>
<LI><A href="http://www.zzjs.net/">窗口特效</A></LI>
<LI><A href="http://www.zzjs.net/">广告代码</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net/">图像特效</A>
<UL>
<LI><A href="http://www.zzjs.net">·企业简介1</A></LI>
<LI><A href="http://www.zzjs.net">·企业简介2</A></LI>
<LI><A href="http://www.zzjs.net">·企业简介3</A></LI>
<LI><A href="http://www.zzjs.net">·企业风采4</A></LI>
<LI><A href="http://www.zzjs.net/">·企业简介5</A></LI>
<LI><A href="http://www.zzjs.net">·企业简介6</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net/">文章中心</A>
<UL>
<LI><A href="http://www.zzjs.net">·文章中心</A></LI>
<LI><A href="http://www.zzjs.net">·文章中心</A></LI>
<LI><A href="http://www.zzjs.net">·文章中心</A></LI>
<LI><A href="http://www.zzjs.net">·文章中心</A></LI>
<LI><A href="http://www.zzjs.net">·文章中心</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net">国际新闻</A>
<UL>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net/">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI>
<LI><A href="http://www.zzjs.net">·国际新闻</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net">图片中心</A>
<UL>
<LI><A href="http://www.zzjs.net">·图片中心</A></LI>
<LI><A href="http://www.zzjs.net">·图片中心</A></LI>
<LI><A href="http://www.zzjs.net">·图片中心</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net">下载中心</A>
<UL>
<LI><A href="http://www.zzjs.net">·常用软件</A></LI>
<LI><A href="http://www.zzjs.net">·文档下载</A></LI>
<LI><A href="http://www.zzjs.net">·资料下载</A></LI></UL></LI>
<LI><A href="http://www.zzjs.net">留言中心</A></LI>
<LI><A href="http://www.zzjs.net">社区论坛</A></LI></UL>
</div>
</body>
</html>

关于企业网站常用导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016295362325.shtml方便下次再访问哦。

·上一篇： 纯css制作的下拉菜单
·下一篇： 图片滑动显示效果

企业网站常用导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻