zoukankan      html  css  js  c++  java
  • 微博导航

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript">
                var hiddenChild = function(obj) {
                        var ul = obj.getElementsByTagName("ul")[0];
                        ul.style.display = 'none';
                    }
                    /*
                     *obj表示导航条中的直接li
                     */
                var showChild = function(obj) {
                    var ul = obj.getElementsByTagName("ul")[0];
                    ul.style.display = 'block';
                }
            </script>
            <style type="text/css">
                * {
                    margin: 0px;
                    padding: 0px
                }
                /*导航条*/
                
                #nav {
                    line-height: 60px;
                    list-style-type: none;
                    background-color: #0000FF;
                    text-align: center;
                }
                #nav a {
                    color: white;
                    text-decoration: none;
                    display: block;
                     80px;
                    font-size: 20px;
                    font-weight: 800;
                }
                #nav a:hover {
                    background-color: #ccc;
                }
                #nav li {
                    background-color: blue;
                    float: left;
                    color: white;
                    list-style-type: none;
                }
                #nav li ul {
                    position: absolute;
                    display: none;
                     130px;
                }
                .show {
                    display: block;
                }
            </style>
        </head>

        <body>
            <ul id="nav">
                <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                    <a href="#">首页</a>
                    <ul>
                        <li>
                            <a href="#">全部广播</a>
                        </li>
                        <li>
                            <a href="#">好友</a>
                        </li>
                        <li>
                            <a href="#">关注</a>
                        </li>

                    </ul>

                </li>
                <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                    <a href="#">微频道</a>
                    <ul>
                        <li>
                            <a href="#">微频道1</a>
                        </li>
                        <li>
                            <a href="#">微频道2</a>
                        </li>

                    </ul>
                </li>
                <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                    <a href="#">找人</a>
                    <ul>
                        <li>
                            <a href="#">明星</a>
                        </li>
                        <li>
                            <a href="#">达人</a>
                        </li>

                    </ul>

                </li>
                <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                    <a href="#">微群</a>
                    <ul>
                        <li>
                            <a href="#">股票</a>
                        </li>

                    </ul>
                </li>

            </ul>
        </body>

    </html>

  • 相关阅读:
    基于Dapper的开源Lambda扩展,且支持分库分表自动生成实体基础
    用SignalR和Layui搭建自己的web聊天网站
    MySQL查看、修改字符集及Collation
    ASP.NET MVC中有四种过滤器类型
    一个简单的大转盘抽奖程序(附.NetCore Demo源码)
    网站统计中的访问信息收集的前端实现
    微信小程序实现按首字母检索城市列表
    微信小程序异步处理
    微信小程序下拉框
    node.js上传文件
  • 原文地址:https://www.cnblogs.com/dlling/p/4688723.html
Copyright © 2011-2022 走看看