制作导航栏并用CSS美化

纵向导航栏
- 用到伪类来做鼠标悬停的变色，伪类的关键字是：开头。
- 用到display:block;来块化超链接，不然超链接文本看起来就是简单的文字效果。

<html>
    <head>
        <!--Ctrl+S保存后就可以刷新浏览器预览-->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
        <title>纵向菜单</title>
        <style type="text/css">
            /*消除小黑点并设置列表样式*/
            ul li{
                list-style: none; /*列表项无编号*/
                width: 100px;/*列表宽度*/
                height: 30px;/*列表高度*/
                line-height: 30px;/*行高*/
                margin-bottom: 1px;/*列表项之间的底部间距*/
                text-align: center;/*文本居中*/
            }
            /*消除下划线，设置文字大小颜色*/
            ul li a{
                display: block;/*超链接显示为块元素*/
                text-decoration: none;/*超链接无下划线*/
                font-size: 14px;/*文字尺寸*/
                color: #FFCC00;/*颜色*/
                background-color: #000066;/*背景色*/
                border-left-width: 10px;/*超链接左边框宽度为10，预览黄色那个就是左边框*/
                border-left-style: solid;/*左边框为实线*/
                border-left-color: #FF9900;/*左边框颜色*/
            }
            /*鼠标移动使文字颜色变化并加粗*/
            ul li a:hover{/*hover伪类：开头用“：”作为关键字。它用于选择处于特定状态的元素，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护*/
                color: #FFFFFF;
                background-color: #000033;
                border-left-width: 10px;
                border-left-style: solid;
                border-left-color: #d8d803;
            }   
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">首页</a></li>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
        <li><a href="#">菜单5</a></li>
    </ul>
    </body>
</html>

横向导航栏
- 用到float: left;来把列表横向。
- 用到<div>及其id

<html>
    <head>
        <!--Ctrl+S保存后就可以刷新浏览器预览-->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
        <title>横向菜单</title>
        <style type="text/css">
            /*设置div中的样式*/
            #topmenu{
                background: #515151;
                font-size: 14px;
                color:#ffffff;
                height: 27px;
            }
            /*列表标签样式*/
            #topmenu ul{
                list-style-type:none;/*去掉列表编号*/
            }
            /*列表项标签样式*/
            #topmenu li{
                float: left;/*横向*/
                text-align: center;
                line-height: 27px;
            }
            #topmenu li a{
                display: block;
                width: 100px;
                color: #fff;
                text-decoration: none;/*去掉超链接下划线*/
            }
            #topmenu li a:hover{
                background: #ff0;/*鼠标悬停变色*/
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="topmenu">
        <ul>
            <li><a href="#">首页</a></li>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
        <li><a href="#">菜单5</a></li>
    </ul>
</div>
    </body>
</html>

下拉菜单设置
- 用到通配符*
- 用到类class
- 用到嵌套做对特定标签下的子标签设置，语法规则是父标签子标签孙标签曾孙标签 .. {}
- 用到设置一级标签``和二级标签的方法，就是ul,li,ul,li嵌套使用
- 用到显示二级标签方法，用display:block;做二级标签显示
- 不管一级标签还是二级标签，都用伪类做鼠标悬停效果

<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>下拉菜单</title>
    <style type="text/css">
        /*通配符*/
        *{
            margin: 0;/*页面标签外边距*/
            padding: 0;/*页面标签内边距*/
        }
        /*列表项样式*/
        li{
            list-style: none;
            text-align: center;/*居中，居网页的中*/
            line-height: 24px;
        }
        /*超链接效果*/
        a{
            text-decoration: none;
            color: #333333;
            font-size: 12px;
            line-height: 24px;
            display: block;
        }
        /*div容器内ul下的li元素调整,没打“，”不是集体声明*/
        .nav ul li{
            width: 120px;
            float: left;
            border: 1px #333 dashed;/*设置li边框粗细颜色线型*/
            background: #ffd2d2;
        }
        /*设置二级菜单隐藏*/
        .nav ul li ul{
            display: none;
        }
        /*设置显示被隐藏的二级菜单*/
        .nav ul li:hover ul,.nav ul li a:hover ul{
            display: block;/*设置为块即可显示*/
            width: 120px;
            height: 24px;
        }
        /*设置鼠标悬停效果*/
        .nav ul li a:hover{
            color: #fff;
            background-color: #BB0916;
        }
        /*设置二级菜单*/
        .nav ul li ul li{
            background-color: #FEE;
            width: 120px;
        }
        /*设置二级菜单悬停效果*/
        .nav ul ul li a:hover{
            background: #F7F7B9;
            color: #666666;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">菜单1</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li><a href="#">菜单2</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                </ul>
            </li>
            <li><a href="#">菜单4</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li><a href="#">菜单5</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                    <li><a href="#">子菜单5</a></li>
                    <li><a href="#">子菜单6</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>