下拉菜单(横向)

css

#nav{
            background-color:gray ;  /*菜单的背景色*/
            width: 500px;
            height: 50px;
            margin: 0 auto;   /*上下为0，左右自动*/
        }
        ul{list-style: none;}/*不带圆点*/
        ul li{
            float: left;
            padding: 0 10px;
            border: 1px solid royalblue;
            text-align: center;
            line-height: 50px;
        }
        a{
            text-decoration: none; /*注解1*/
            display: block;/*注解2*/
            padding: 0 10px;
            width: 50px;
        }
        a:hover{ /*注解3*/
            background-color: yellowgreen;/*鼠标移到菜单  背景颜色*/
            color: orangered; /*鼠标移到菜单  字体颜色*/
        }
        .r{
            float: none; /*不浮动*/
            background-color: yellow; /*二级菜单  背景颜色*/
        }
        .r a:hover{
            color: deeppink;  /*鼠标移到二级菜单  字体颜色*/
            background-color: palegreen; /*鼠标移到二级菜单  背景颜色*/
        }
        .r-ul{
            display: none;
        }
        ul li:hover .r-ul{ /*展开*/
            display: block;
        }
    </style>

html

<div id="nav">
        <ul>
            <li>
                <a href="">b</a>
                <div class="r-ul r">
                    <a href="">b1</a>
                    <a href="">b1</a>
                </div>
            </li>
            <li>
                <a href="">b</a>
                <div class="r-ul r">
                    <a href="">b1</a>
                    <a href="">b1</a>
                </div>
            </li>
        </ul>
    </div>

运行结果：

注解：
1.

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}

效果：

2.display属性
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。

3.
:hover 选择器可用于所有元素，不只是链接
:link 选择器设置指向未被访问页面的链接的样式
:visited 选择器用于设置指向已被访问的页面的链接
:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后样式才能生效。

选择未访问、已访问、悬浮和活动链接
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}