<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作伸缩两级菜单</title>
<style>
body{
background-color:#eed0e0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul > li {
border-bottom:1px solid #AD9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711111; /* 左边的粗边 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#880020; /* 改变背景色 */
color:#ff0000; /* 改变文字颜色 */
制作伸缩两级菜单(HTML,CSS,JavaScript)
最新推荐文章于 2022-04-26 17:32:28 发布