HTML网页怎么做下拉二级菜单啊，CSS布局表示不太熟练

img

上图是我自己目前在做的博客，我想在菜单栏的相册和日记两处分别设置下拉二级菜单
<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文件之类的
  1. li里放个二级菜单的div
  2. li设置相对定位，二级菜单div设置绝对定位，这样二级菜单的绝对定位的基准点就变成li的左上角了。就能实现每个li有各自的二级菜单了。

如有帮助，麻烦点个[采纳此答案]


<html>

<head>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <style>
    .menu>ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    li {
      width: 150px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      list-style: none;
    }
    .ernav ul li{
      text-align: left;
      width: 150px;
     
    }
    .ernav ul {
      display: none;
    }
    .ernav:hover>ul{
      display: block;
    }
  </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 class="ernav">
        <a href="photo.html">相册</a>
        <ul>
          <li><a href="#">生活图片</a></li>
          <li><a href="#">学习图片</a></li>
          <li><a href="#">运动图片</a></li>
        </ul>
      </li>
      <li class="ernav">
        <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>