<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{
background-color:#9BD5BF;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
left: 198px;
top: 25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=30);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">设置
<div class="list">
<a href="#">我的Png</a><br />
<a href="#">我的Gif</a><br />
<a href="#">我的酷站</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">风格
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">提醒
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">查询
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
"非常漂亮的3D下拉菜单"是一个利用JavaScript（JS）实现的特效，它不仅具备基本的导航功能，还通过3D视觉效果提升了用户体验。 一、3D效果在下拉菜单中的应用 3D效果在现代网页设计中是一种流行趋势，它为用户带来...
【标题】"非常漂亮的3D下拉菜单特效代码"是一个关于网页设计和前端开发的知识点，主要关注用户体验和视觉效果的提升。这个标题暗示我们将会讨论一种能够吸引用户注意力、增强交互体验的3D下拉菜单实现方法。在网页...
在CSS3菜单栏目中，我们分享了很多漂亮的菜单特效，相信很多CSS3菜单也都非常实用。今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单，这个CSS3菜单利用CSS3特性可以浮动在网页上，并带有阴影效果，同时，...
网页上点击下拉的漂亮纵向菜单特效，基于jquery实现部分动画效果，严格来说是一款通用性强的网页侧边栏下拉菜单，你可把本菜单放在网页的左上角、右上角等边角位置，用户点击时才会显示出菜单，默认状态下是收起的，...
**jQuery+CSS3漂亮的下拉菜单选择框美化特效** 在网页设计中，下拉菜单选择框是常见的交互元素，用于用户在多个选项中进行选择。然而，原生HTML的下拉菜单样式通常较为简单，不符合现代网页的美观需求。本教程将...
本篇将详细讲解"漂亮的CSS3弹性导航下拉菜单代码"所涉及的知识点。 首先，CSS3中的Flexbox（弹性盒布局）是创建这种弹性菜单的基础。Flexbox允许我们轻松地处理元素的对齐、分布和大小调整，无论元素数量或屏幕尺寸...
总结来说，这个“漂亮的基于jQuery实用下拉菜单代码”结合了jQuery的便利性、div+css的灵活性和网页特效的吸引力，为网页设计者提供了一个强大且易于定制的解决方案，适用于各种网页和广告设计项目。通过理解和应用...
本文将深入探讨“一个很漂亮的三级下拉菜单”这一话题，该菜单利用JavaScript（JS）特效实现，提供了优秀的用户体验。下面我们将详细解析这个三级下拉菜单的设计原理、实现方式以及可能涉及的相关技术。 一、菜单...
在本案例中，“很漂亮实用的手风琴下拉菜单”是基于jQuery实现的一个高效且美观的解决方案。 首先，我们来探讨一下jQuery——这是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
本文将详述“一个很漂亮的三级下拉菜单特效代码”的实现及其相关知识点，旨在帮助开发者理解和构建类似的交互式菜单。 首先，我们关注的是菜单结构。在网页中，通常使用HTML的`<ul>`和`<li>`元素来构建多级菜单。在...
HTML5 SVG分类下拉菜单选择特效是一种现代网页设计技术的结合体，主要应用于创建具有视觉吸引力和交互性的用户界面。这种特效将HTML5的新特性、SVG（可缩放矢量图形）以及下拉菜单功能巧妙地融合在一起，为用户提供...
本文将详细探讨标题“五款漂亮的CSS横向下拉菜单导航条”所涵盖的知识点，以及如何利用CSS来创建这样的效果。 一、CSS基础 CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、XHTML等）文档样式的语言。通过CSS...
jquery-accordion-menu-multilevel是一款非常酷的Material Design风格多级下拉列表菜单jQuery插件。该下拉列表在菜单项点击时采用漂亮的点击波特效，并提供了三种预设的颜色主题样式。
一个采用JavaScript编写的下拉菜单自动生成器，你可自定义每个下拉菜单项的内容，用此工具可快速生成下拉菜单代码，你复制这些代码到你的网页中，就可实现一款漂亮的下拉菜单，如果不满意，你可在此基础上再此扩展。
"漂亮的CSS3弹性导航下拉菜单特效代码"就是利用CSS3特性实现的一款独特菜单设计，它具有波浪状弹性动画效果，使菜单在展开和收缩时呈现出动态美感。 首先，我们来看这个导航菜单的核心特点：弹性动画。CSS3的`...
这款“漂亮的CSS3弹性导航下拉菜单代码”提供了一种创新且吸引人的解决方案，结合了CSS3的特性来实现波浪状弹性动画效果，使得菜单交互更加生动有趣。 首先，CSS3（Cascading Style Sheets level 3）是CSS的第三个...
本文将深入探讨"非常非常漂亮的JS导航菜单"这一主题，包括可刷新的JS树形菜单、三级导航下拉菜单以及JS树形菜单的相关知识点。 首先，我们来看"可刷新的JS树形菜单"。树形菜单是一种层次结构清晰的展示方式，尤其...
HTML5 下拉菜单 焦点图综合效果，就是大家熟悉的...分离给大家，下拉菜单还是很不错的，圆角风格，而且用户体验超棒，兼容性也十分的好，在手机端也可使用，具体效果，请看测试截图。 需要使用请单击下载源码按钮。
在“简单的手风琴滑动漂亮的左导航下拉特效源码下载”中，我们可以推测这个源码实现了一个简洁而美观的左侧导航栏，具备手风琴式下拉功能。手风琴效果通常通过JavaScript和CSS来实现，结合HTML结构，创建出动态的...