zoukankan      html  css  js  c++  java
  • CSS-下拉导航条

    Web网站中很多时候都会出现下拉导航条,有的是通过CSS实现,有的通过JavaScript插件实现,其实CSS实现起来比较简单,先来看一个简版的下拉菜单:

    Html代码通过ul列表实现:

     <ul class="nav">
            <li>首页</li>
            <li>产品</li>
            <li>服务
                <ul>
                    <li>设计</li>
                    <li>研发</li>
                    <li>交付</li>
                </ul>
            </li>
            <li>关于我们
                <ul>
                    <li>博客园</li>
                    <li>FlyElephant</li>
                    <li>keso</li>
                </ul>
            </li>
        </ul>
    

    CSS代码如下:

        .nav {
            margin-left: 200px;
            margin-top:200px;
        }
        
        .nav li {
            float: left;
             150px;
            background-color: #00C5CD;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            border-right: 1px solid #fff;
        }
        
        .nav li:last-child {
            border-right: none;
        }
        
        .nav li ul {
             150px;
            position: absolute;
            margin-top: 10px;
            left: 9999px;
        }
        
        .nav li ul li {
            background-color: #00EE00;
            border-bottom: 1px solid #fff;
        }
        
        .nav li:hover ul {
            left: auto;
        }
    

     里面很重要的一点就是在正常状态下将需要展示的ul位置只放在屏幕之外,left:9999px,鼠标滑动上的时候将left设置为auto~

  • 相关阅读:
    将军与妓
    LINUX SHELL
    LINUX FTP
    Java API的常用包
    PYTHON LOGGING模块
    json转xml
    xml转json
    PYTHON DJANGO学习笔记
    PYTHON爬取66影视的电影下载链接,有搜索功能
    JAVA PROPERTIES配置文件使用方法
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5038552.html
Copyright © 2011-2022 走看看