zoukankan      html  css  js  c++  java
  • 鼠标划过出现子菜单

    <head>
    <script>
    startList = function() 
    {
    if (document.all&&document.getElementById) 
    {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) 
    {
    node = navRoot.childNodes[ i ];
    if (node.nodeName=="LI") 
    {
    node.onmouseover=function() 
    {this.className+=" over";}
    node.onmouseout=function() 
    {this.className=this.className.replace(" over", "");}
    }
    }
    }
    }
    window.onload=startList;
    </script>
    <style>
    body {
    
    }
    
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
     150px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    }
    
    ul li {
    position: relative;
    }
    
    li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    }
    
    
    
    #nav li:hover ul, li.over ul { display: block; } /* The magic */
    
    /* Styles for Menu Items */
    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    
    #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    </style>
    </head>
    <body>
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Offices</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Internet Marketing</a></li>
          <li><a href="#">Hosting</a></li>
          <li><a href="#">Domain Names</a></li>
          <li><a href="#">Broadband</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a>
        <ul>
          <li><a href="#">United Kingdom</a></li>
          <li><a href="#">France</a></li>
          <li><a href="#">USA</a></li>
          <li><a href="#">Australia</a></li>
        </ul>
      </li>
    </ul>
    </body>
    
  • 相关阅读:
    (绝对有用)iOS获取UUID,并使用keychain存储
    宏定义判断设备是否是iphone5
    如何在未越狱iOS设备上安装IPA
    制作iOS Ad-Hoc测试应用
    UIWebView中Html中用JS调用OC方法及OC执行JS代码
    ios开发入门- plist 文件读写
    [iOS] 如何将你的程序打包成ipa
    《网络对抗技术》Exp1 PC平台逆向破解——20181308邵壮
    公文传输系统冲刺总结——Day3
    MyOD实验 20181308
  • 原文地址:https://www.cnblogs.com/freespider/p/2002307.html
Copyright © 2011-2022 走看看