2.圆角菜单的两种方法和菜单的缩放

 方法一：设置成背景图片 style{background:url(../image/2.jpg);}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .class1 {border-bottom: 5px solid #f60;height: 50px;padding-left: 30px;list-style: none;}
        .class1 li a{display: block;float: left;width: 120px;height: 30px;margin-top:20px;line-height: 30px;text-align: center;text-decoration: none;background: url(../image/2.jpg);}
        .class1 li .shouYe,.class1 li a:hover{color: white;background: url(../image/1.jpg);background-position:  0 -30px}

    </style>
</head>
<body>
    <ul class="class1">
        <li><a href="" class="shouYe">首   页</a></li>
        <li><a href="">新闻快讯</a></li>
        <li><a href="">产品展示</a></li>
        <li><a href="">联系我们</a></li>
    </ul>    
</body>
</html>

方法二：直接设置成圆角样式 style{border-top-left-radius:20px;border-top-right-radius:20px;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .class2{border-bottom: 5px solid #f60;height: 50px;padding-left: 30px;list-style: none;}
        .class2 li a{display: block;float: left;width: 120px;height: 30px;margin-top: 20px;line-height: 30px;text-align: center;text-decoration: none;background-color: #ccc;border-top-left-radius: 20px;border-top-right-radius: 20px;}
        .class2 li .shouYe,.class2 li a:hover{color: white;background-color: #f60}
    </style>
</head>
<body>
    <ul class="class2">
        <li><a href="" class="shouYe">首   页</a></li>
        <li><a href="">新闻快讯</a></li>
        <li><a href="">产品展示</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
    
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        /*可以伸缩的菜单*/
        .class3{
            border-bottom: 5px solid #f60;
            list-style: none;
            height: 50px;
            padding-left: 30px;
        }
        .class3 li a{
            text-decoration: none;
            width: 120px;
            line-height: 30px;
            margin-top: 20px;
            background: #ccc;
            float: left;
            text-align: center;
        }
        .class3 .shouYe{
            color: white;
            background: #f60;
        }
        .class3 .shouYe:hover,.class3 a:hover{
            color: white;
            background: #f60;
            height: 40px;
            margin-top: 10px; /*往上移10px*/
            line-height: 40px; /*文字上下居中显示*/
        }
    </style>
</head>
<body>
    <ul class="class3">
        <li><a href="" class="shouYe">首   页</a></li>
        <li><a href="">新闻快讯</a></li>
        <li><a href="">产品展示</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
    
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chenJieLing/p/11659832.html