上图是我自己目前在做的博客，我想在菜单栏的相册和日记两处分别设置下拉二级菜单
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
.banner .menubg{
position:absolute;
bottom:0px;
height:40px;
width:100%;
background:black;
opacity:0.5;
}
.banner .menu{
position:absolute;
bottom:0px;
height:40px;
width:100%;
}
.banner .menu ul{
line-height:2.3em;
font-size:1.2em;
color:white;
}
.banner .menu ul li{
list-style-type:none;
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float:left; /* 往左浮动 */
margin-left:60px;
}
.menu a:link {
color:white;
text-decoration:none;
}
.menu a:visited {
color:white;
text-decoration:none;
}
.menu a:hover {
color:white;
text-decoration:none;
background-image: linear-gradient(to top,currentColor,currentColor 2px,transparent 2px);
padding-bottom:5px;
}
.menu a:active {
color:white;
text-decoration:none;
}
.default-link{
color:white;
text-decoration:none;
background-image: linear-gradient(to top,currentColor,currentColor 2px,transparent 2px);
padding-bottom:5px;
}
</style>
</head>
<body>
<div class="menubg">
</div>
<div class="menu">
<ul>
<li>
<a href="index.html" class="default-link">首页</a>
</li>
<li>
<a href="about.html">关于我</a>
</li>
<li>
<a href="photo.html">相册</a>
<ul>
<li><a href="#">生活图片</a></li>
<li><a href="#">学习图片</a></li>
<li><a href="#">运动图片</a></li>
</ul>
</li>
<li>
<a href="blog.html">日志</a>
<ul>
<li><a href="#">技术文档</a></li>
<li><a href="#">精美散文</a></li>
<li><a href="#">个人随笔</a></li>
</ul>
</li>
<li>
<a href="message.html">留言板</a>
</li>
</ul>
</div>
</body>
</html>
由于源码篇幅过长，上边提取了主要的一级菜单源码和CSS样式，想问问怎么修改一级菜单的CSS样式得到二级菜单呢，我在网上参考了很多方法都显示不出来，还是需要JS文件之类的
