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>

  • 相关阅读:
    13-7实现旅拍卡片布局-2
    13-6实现旅拍卡片布局-1
    13-5实现旅拍瀑布流布局-2
    13-4实现旅拍瀑布流布局-1
    13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab
    13-2根据接口实现dao层
    13-1
    12-12本章小结
    12-11【锦上添花】Flutter AI只能语音搜索功能实现
    12-10【收货果实】Futter AI只能语音界面开发-2
  • 原文地址:https://www.cnblogs.com/Tracy-zdy/p/3746645.html
Copyright © 2011-2022 走看看