关于CSS实现漂亮的下拉导航效果-css教程-PHP中文网

首页

web前端

css教程

关于CSS实现漂亮的下拉导航效果

不言

Jun 25, 2018 pm 02:45 PM

css下拉导航

这篇文章主要为大家介绍了纯CSS实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：

这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。

运行效果截图如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD id=Head1>
<TITLE>纯CSS下拉菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
* {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
    LIST-STYLE-TYPE: none
}
LI {
    LIST-STYLE-TYPE: none
}
DL {
    LIST-STYLE-TYPE: none
}
DD {
    LIST-STYLE-TYPE: none
}
DT {
    LIST-STYLE-TYPE: none
}
A {
    COLOR: #414141; TEXT-DECORATION: none
}
IMG {
    DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
A:hover {
    COLOR: #c51007
}
#dangqian A {
    COLOR: #c51007
}
.clear {
    CLEAR: both
}
.warper {
    MARGIN: 0px auto; WIDTH: 1000px
}
.menu {
    MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px
}
.menu_01 {
    FLOAT: left
}
.menu_02 {
    FLOAT: right
}
.menu A {
    FONT-WEIGHT: bold; COLOR: #fff
}
.menu A:hover {
    COLOR: #b8def6
}
.menu DL {
    FLOAT: left
}
.menu DD {
    FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center
}
.menu DT {
    PADDING-LEFT: 1px; BACKGROUND: url(images/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center
}
.menuli_p {
    BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px
}
.menuli_p LI {
    BACKGROUND: url(images/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px
}
.menu DT UL LI A {
    FONT-WEIGHT: normal
}
.menuli .menuli_p {
    DISPLAY: none
}
.menuli_hover .menuli_p {
    DISPLAY: block
}
</style>
<BODY onselectstart="return false">
<p class=warper>
<p class=menu><DL>
 <DD><A href="#" target=_self>首页</A></DD>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>关于家乡网</A>
 <UL class=menuli_p>
  <LI><A href="#">About</A></LI>
    <LI><A href="#">家乡网</A></LI>
    <LI><A href="#">中国网</A></LI>
    <LI><A href="#">大武汉</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>资讯动态</A>
 <UL class=menuli_p>
  <LI><A href="#">省内</A></LI>
    <LI><A href="#">省外</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>组织机构</A>
 <UL class=menuli_p>
      <LI><A href="#">省委</A></LI>
    <LI><A href="#">政府</A></LI>
    <LI><A href="#">政协</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>主营业务</A>
 <UL class=menuli_p>
  <LI><A href="#">淘宝</A></LI>
    <LI><A href="#">手机</A></LI>
    <LI><A href="#">相机</A></LI>
    <LI><A href="#">电脑</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>品牌战略</A>
 <UL class=menuli_p>
  <LI><A href="#">一杯水</A></LI>
    <LI><A href="#">城市生活</A></LI>
    <LI><A href="#">家乡网</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>人才招聘</A>
 <UL class=menuli_p>
  <LI><A href="#">我的家</A></LI>
    <LI><A href="#">家乡网</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>联系我们</A>
 <UL class=menuli_p>
  <LI><A href="#">联系我</A></LI>
  <LI><A href="#">联系她</A></LI>
    <LI><A href="#">我的家</A></LI>
  </UL></DT></DL></p>
</BODY>
</HTML>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

以上是关于CSS实现漂亮的下拉导航效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

什么是CSS网格？Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂，响应式Web布局的强大工具。它简化了设计，提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架

CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画？Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS，关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗？Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换，关键属性，浏览器兼容性和性能注意事项的讨论。（角色计数：159）

我们如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度（线性，径向，重复）来增强网站视觉效果，添加深度，焦点和现代美学。

CSS中的伪元素是什么？Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素，它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），