zoukankan      html  css  js  c++  java
  • 左右菜单

    <!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" >
    <head runat="server">
    <title>JavaScript下拉菜单</title>
    <style type="text/css">
    * {
    padding:0;
    margin:0;
    }
    body {
    font-family:verdana, sans-serif;
    font-size:small;
    }
    #navigation, #navigation li ul {
    list-style-type:none;
    }
    #navigation {
    margin:20px;
    }
    #navigation li {
    text-align:center;
    position:relative;
    margin-bottom:5px;
    }

    #navigation li ul li{
    text-align:center;
    position:relative;
    margin-bottom:0px;
    }

    #navigation li a:link, #navigation li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    150px;
    height:80px;
    line-height:40px;
    padding-left:10px;
    }

    #navigation li ul li a:link, #navigation li ul li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    150px;
    height:40px;
    line-height:40px;
    background:#c5dbf2;
    padding-left:10px;
    }

    #navigation li a:hover {
    color:#fff;
    background:#2687eb;
    }

    #navigation li ul li a:hover {
    color:#fff;
    background:#2687eb;
    }

    #navigation li ul {
    display:none;
    position:absolute;
    top:0px;
    left:160px;
    margin-top:0;
    120px;
    }
    </style>
    <script type="text/javascript">
    function displaySubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    li.style.background = "#c5dbf2";
    subMenu.style.display = "block";
    }
    function hideSubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
    li.style.background = "";
    }
    </script>
    </head>
    <body>
    <div style="200px; height:500px; background-color:red;">
    <ul id="navigation">
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
    <a href="#"><img src="http://www.jeasyui.com/images/logo1.png" style="50px;height:50px"><br/>栏目3</a>
    <ul>
    <li>
    <a href="#">栏目3->菜单1</a>
    </li>
    <li><a href="#">栏目3->菜单2</a></li>
    <li>
    <a href="#">栏目3->菜单3</a>
    </li>
    </ul>
    </li>

    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
    <a href="#"><img src="http://www.jeasyui.com/images/logo1.png" style="50px;height:50px"><br/>栏目3</a>
    <ul>
    <li><a href="#">菜单3->子菜单1</a></li>
    <li><a href="#">菜单3->子菜单2</a></li>
    <li><a href="#">菜单3->子菜单3</a></li>
    </ul>
    </li>
    </ul>
    <div/>
    </body>
    </html>

  • 相关阅读:
    [考试反思]0421省选模拟76:学傻
    [考试反思]0420省选模拟75:安在
    [考试反思]0418省选模拟74:杂枝
    [考试反思]0417省选模拟73:纠结
    [考试反思]0416省选模拟72:停滞
    [考试反思]0415省选模拟71:限制
    [考试反思]0414省选模拟70:阻塞
    [考试反思]0413省选模拟69:遗弃
    [考试反思]0411省选模拟68:毒瘤
    [考试反思]0410省选模拟67:迷惑
  • 原文地址:https://www.cnblogs.com/Tracy-zdy/p/3746645.html
Copyright © 2011-2022 走看看