zoukankan      html  css  js  c++  java
  • 垂直纵向导航栏

    第一次做导航栏,把遇到的问题和解决办法进行整理。

    最后效果:

    注意的问题:

      1.li样式的清除

      2.无序列表的嵌套

      3.下方代码标注注意的地方,我第一次写的时候,把height的值设为了一个定值,虽然最后的效果出来了,但是处在很多问题

    没有二级菜单的它也被撑大了,这是错误的,应该把它设为100%。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>练习3</title>
    </head>
    <body>
        <ul id="main">
            <li>首页
                <ul id="son">
                    <li>javascript</li>
                    <li>html</li>
                    <li>css</li>
                </ul>
            </li>
            <li>博客</li>
            <li>相册</li>
            <li>帮助</li>
            <li>关于</li>
        </ul>
    </body>
    </html>
    </body>
    </html>
    <style type="text/css">
            #main li{
                width: 100px;
                height: 40px;
                list-style-type: none;
                background-color: #037F01;
                color: white;
                text-align: center;
                line-height: 40px;
                z-index: 2;
                overflow: hidden;
            }
            #son li{
                margin-left: -40px;
                
                display: block;
                background-color: #8FE3FE;
                color: white;
                z-index: 1;
                display: none;
            }
            #main li:hover{
                width: 100px;
           /*注意*/
    height: 100%; background-color: #F5F3DD; color: #A8C66A; } #main li:hover #son li{ display: block; } #son li:hover{ background-color: #0846A2; color: white; height: 40px; } </style>
  • 相关阅读:
    node.js中的全局变量——global
    Element-UI库 源码架构浅析
    如何搭建一个自己cli
    webpack实践之DLLPlugin 和 DLLReferencePlugin
    HappyPack优化
    线程和进程
    kafka?kafaka! kafka...
    Dubbo的初步理解和使用
    Redis的安装和启动
    解析Spring MVC上传文件
  • 原文地址:https://www.cnblogs.com/jiushui/p/9898182.html
Copyright © 2011-2022 走看看