这是一个关于如何使用JavaScript创建无纯CSS下拉菜单的教程。 不过我注意到，人们经常使用JavaScript来达到这种效果。 其实，有一个简单的方法只用CSS它。

下面是例子

第一步骤：我们创建一个基本的HTML结构。

  > <分区 编号 =“头”>
 <h1>开发的乐园演示</ H1的>
 > <UL认证 的ID =“菜单”>
 <li> 的<span>首页</跨度>
 <ul>
 > Menu item 1 </a> </li> <li> <一 的HREF =“＃”>“功能表项目1 </一> </李>
 > Menu item 2 </a> </li> <li> <一 的HREF =“＃”>“功能表项目2 </一> </李>
 > Menu item 3 </a> </li> <li> <一 的HREF =“＃”>“功能表项目3 </一> </李>
 </ UL认证>
 </李>
 <li> 的<span>公司简介</跨度>
 <ul>
 > Menu item 1 </a> </li> <li> <一 的HREF =“＃”>“功能表项目1 </一> </李>
 > Menu item 2 </a> </li> <li> <一 的HREF =“＃”>“功能表项目2 </一> </李>
 > Menu item 3 </a> </li> <li> <一 的HREF =“＃”>“功能表项目3 </一> </李>
 </ UL认证>
 </李>
 <li> 的<span>产品</跨度>
 <ul>
 > Menu item 1 </a> </li> <li> <一 的HREF =“＃”>“功能表项目1 </一> </李>
 > Menu item 2 </a> </li> <li> <一 的HREF =“＃”>“功能表项目2 </一> </李>
 > Menu item 3 </a> </li> <li> <一 的HREF =“＃”>“功能表项目3 </一> </李>
 </ UL认证>
 </李>
 </ UL认证>
 </格> 

第二步：现在我们创建的CSS代码魔

  ; padding : 0 ; } * {保证金：0;填充：0;}

身体{
 ; 背景 ：＃222;
 Arial, Helvetica, sans-serif ;字体：100％的正常宋体，黑体， 无衬线 ;
 }

 : #fff ; } H1的{ 颜色 ：＃呋 ;}

 ＃头 {
 ;身高：120px;位置：亲属 ;
 ; 背景 ：＃333;
 }

 {＃菜单
保证金：0px;
填充：0px;
位置：绝对的 ;
 ; 顶部 ：70px;
显示：块 ;
 }

 ＃“菜单>李{
列表样式类型：无 ;
浮动：左 ;
显示：块 ;
 ;保证金：0px 10px;
位置：亲属 ;
填充：10px;
宽度：100像素 ;
 }

 ul { ＃“菜单>李：悬停 UL认证{
显示：块 ;
 }

 { ＃“菜单>李：悬停 {
 ; 背景颜色 ：＃808080;
万盎司边界半径：10px;
 - WebKit的边界半径：10px;
 }

李UL认证{＃菜单
保证金：0px;
填充：0px;
显示：无 ;
 }
 ＃菜单李李{UL认证
列表样式类型：无 ;
 ;保证金：10px 0 0 0;
字体大小：11px;
 }

 ＃菜单李李一{UL认证
显示：块 ;
 ;填充：5px 10px;
 ; 颜色 ：＃呋 ;
文字装饰：无 ;
字体重量：大胆 ;
 }

 a { ＃菜单 UL认证李李：悬停一{
 ; 背景颜色 ：＃ 六十〇万六千〇六十 ;
万盎司边界半径：5px;
 - WebKit的边界半径：5px;
 }

李跨度{＃菜单
光标：指针 ;
 ;保证金：0px 10px;
字体重量：大胆 ;
 ; font-size : 11px ; 颜色 ：＃呋 ;字体大小：11px;
 } 

请注意，此代码不工作在IE6（这个可怜的浏览器只是不知道什么是UL认证>里的意思）。

我将不胜感激，如果你能花一秒钟，以帮助促进我的博客，分享这与你喜欢的网络使用下面的链接网站的任何链接。 这里是一个网站链接到我们的首选，如果你想注册域名 。

提起下： 的CSS ， 教程由admin