div+css制作的菜单

最新推荐文章于 2017-11-20 23:16:00 发布

原创最新推荐文章于 2017-11-20 23:16:00 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #div #url #float #class #c

dhtml 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用 CSS 实现的水平菜单栏样式，包括如何设置菜单的宽度、高度、背景颜色等属性，并展示了如何通过伪类实现鼠标悬停效果。此菜单适用于网站导航栏的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.Menu ul { list-style:none; margin:0px;}
.Menu li { float:left; padding-left:8px; } //如果要显示竖型列表菜单请把float:left属性去掉

.Menu a { background:url(img/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }

.Menu a:link { background:url(img/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }

.Menu a:visited { background:url(img/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }

.Menu a:hover { background:url(img/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

.Menu a:active { background:url(img/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
-->
</style>
<div class="Menu">
<ul>
<li><a title="学习" href="#">学习</a></li>
<li><a title="技术" href="#">技术</a></li>
<li><a title="专题" href="#">专题</a></li>
<li><a title="博客" href="#">博客</a></li>
<li><a title="论坛" href="#">论坛</a></li>
</ul>
</div>