<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>css菜单演示</title>

 <style type="text/css">

 *{margin:0;padding:0;border:0;}

 body {

     font-family: arial, 宋体, serif;

     font-size:12px;

 }

 #nav {

     text-align:center;

     line-height:24px;list-style-type:none;background:#666;

     margin-left:30px;

 }

 #nav a {

     display: block; width: 80px; text-align:center;

 }

 #nav a:link {

     color:#666666; text-decoration:none;

 }

 #nav a:visited {

     color:#666;text-decoration:none;

 }

 #nav a:hover {

     color:#CCCCCC;text-decoration:none;font-weight:bold;

 }

 #nav li {

     float: left; width: 80px; background:#00FFFF;

 }

 #nav li a:hover{

     background:#999;

 }

 #nav li ul {

     line-height:27px;list-style-type:none;text-align:left;

     left:-999em;width:80px; position: absolute;

     margin-left:-40px;

 }

 #nav li ul li{

     float:left;width:80px;background: #F6F6F6;

 }

 #nav li ul a{

     display:block;width:80px;text-align:left;padding-left:24px;

 }

 #nav li ul a:link {

     color:#666; text-decoration:none;

 }

 #nav li ul a:visited {

     color:#666;text-decoration:none;

 }

 #nav li ul a:hover {

     color:#F3F3F3;text-decoration:none;font-weight:normal;

     background:#ccc;

 }

 #nav li:hover ul {

     left: auto;

 }

 #nav li.sfhover ul {

     left: auto;

 }

 #content {

     clear: left;

 }

 </style>

 <script type=text/javascript>

 function menuFix() {

     var elems = document.getElementById("nav").getElementsByTagName("li");

     for (var i=0; i<elems.length; i++) {

         elems[i].onmouseover = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onMouseDown = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onMouseUp = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onmouseout = function() {

             this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");

         }

     }

 }

 window.onload=menuFix;

 </script>

 </head>

 <body>

     <ul id="nav">

         <li><a href="#">下拉菜单</a>

             <ul>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

             </ul>

         </li>

         <li><a href="#">下拉菜单</a>

             <ul>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

             </ul>

         </li>

     </ul>

 </body>

 </html>

符合web标准的网页下拉菜单的更多相关文章

  1. Delphi访问网页中的下拉菜单

    Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml;procedure TForm1.Button1Click(Sender: TObject);va ...

  2. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  3. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. EasyDropDown – 很棒的下拉菜单，含精美主题

    EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航.和著名的下拉插件 Chosen 很像,但是具有自己 ...

  6. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  8. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. OpenVPN莫名其妙断线的问题及其解决-confirm

    本文很短,目的在于confirm一下凌乱的< OpenVPN莫名其妙断线的问题及其解决>,如果看觉得我比较啰嗦,那么一定要看看最后一个小节,好在CSDN为每篇文章都自动添加了目录,可以直接 ...

  2. Nginx 403 error

    nginx 的 403 Forbidden errors 表示你在请求一个资源文件但是nginx不允许你查看.403 Forbidden 只是一个HTTP状态码,像404,200一样不是技术上的错误. ...

  3. c#导出Excel 使用EXCEL进程

    private void exportExcel(string filename, string path,string title, List<ArchivedWcsTask> wcst ...

  4. EXTJS 常用控件的使用

    重要按钮配置项 handler: renderTo: 取得控件及其值 var memo = form.findById('memo');//取得输入控件 alert(memo.getValue()); ...

  5. Class类中getMethods() 与getDeclaredMethods() 方法的区别

    一:jdk API中关于两个方法的解释 1:getMethods(),该方法是获取本类以及父类或者父接口中所有的公共方法(public修饰符修饰的) 2:getDeclaredMethods(),该方 ...

  6. Ionic中弹窗

    Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一 ...

  7. [设计模式]<<设计模式之禅>>模板方法模式

    1 辉煌工程——制造悍马 周三,9:00,我刚刚坐到位置上,打开电脑准备开始干活. “小三,小三,叫一下其他同事,到会议室开会”,老大跑过来吼,带着坏笑.还没等大家坐稳,老大就开讲了:“告诉大家一个好 ...

  8. 练习题之Wait/Notify

    方案一: public class PrintABC { public static void main(String[] args) { AtomicInteger synObj = ); Runn ...

  9. hdu 2852 树状数组

    思路:加一个数e就用update(e,1).删除元素e就用update(e,-1).找比a大的第k大的元素就用二分查找. #include<iostream> #include<cs ...

  10. C语言下的简易计算器

    #include <stdio.h> #include <math.h> int main() { double data1, data2; char op; == scanf ...