第八章3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
            font-size: 15px;
        }
        .div{
            border: 1px solid darkslategray;
            height: 30px;
            border-bottom:0.5px dotted gold;
            background-color: #3A6587;
            position:relative;
        }
            .div a{
             text-decoration: none;
                color: #3A6587;
            }
        a:hover {
            background: #ffb315;/*鼠标渐变颜色*/
            text-decoration:underline;
        }
        li{
            display: inline-block;
            margin-top: 5px;
            padding-right: 15px;
            padding-left: 12px;
            border-right: 1px  gray solid;
        }
        .div ul{
            display: inline-block;
            position: absolute;
            top: -15px;
            right: 50px;
            height: 30px;
        }
        #pic{position: absolute;
            right: -10px;
            top: 10px
        }
        .div2{ width: 310px;
            font-size: 14px;
            color: gray;
            border: 1px solid;
            position: absolute;
            right: 0;top: 20px;
            z-index: 1;
            background-color: whitesmoke;}
        .div2 dd{
            display: inline-block;
            margin-right: -10px;
            margin-bottom:5px ;
        }
        .div2 dl{
            display: inline-block;
            margin: 0px auto;
            padding: 15px 0px;
            width: 280px;
            border-bottom: 1px solid gray;
            margin-left: 15px;

        }
        .div2{display: none}
        .a:hover div{
            display: block;
        }
    </style>
</head>
<body>
<div class="div"  style="border-right: none;border-left: none">
    <img src="images/logo.gif" style="float: left;margin-left: 20px">
    <ul>
        <li><a href="images">购物车</a> </li>
        <li><a href="images">优惠券</a> </li>
        <li><a href="images">快速注卡</a> </li>
        <li><a href="images">各地购课</a> </li>
        <li><a href="images">手机报</a> </li>
        <li style="border-right: none;position: relative"><a href="images">网站导航</a> </li>
        <a href="#" class="a"><img  id="pic" src="images/open_icon.gif">
            <div style="border-left: 1px solid;" class="div2">
                <dl>
                    <dd>托福</dd>
                    <dd>雅思</dd>
                    <dd>考研</dd>
                    <dd>职称英语</dd>
                    <dd>初中</dd>
                    <dd>日语</dd>
                </dl>
                <dl>
                    <dd>网络课堂</dd>
                    <dd>资讯中心</dd>
                    <dd>知识堂</dd>
                    <dd>大师讲坛</dd>
                    <dd>学习论坛</dd>
                    <dd>学词</dd>
                    <dd>考研搜校</dd>
                </dl>
                <dl style="border: none;margin-bottom: 5px">
                    <dd>M-Zone</dd>
                    <dd>手机报</dd>
                    <dd>时时英语</dd>
                </dl>
            </div>
        </a>
    </ul>
</div>
</body>
</html>
猜你喜欢
