方法一：设置成背景图片 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>