html和css导航栏制作出现的二级子菜单占位问题

一共两个问题，第一个：
如图，我的二级子菜单显示的时候会把下面的’红柿动态‘挤到一边，其余几个二级子菜单也有这种情况

img

img

第二个问题：我的主页的二级子菜单直接不显示还把下面的图像挤到下面了

img

img

怎么解决这两问题呢？以下是导航栏的css和html


/* 导航部分*/
.menu {
  /* min-width: 500px; */
  position: fixed;
  /*为了把logo定位到导航左上角，子绝父相*/
  position: relative;
  width: auto;
  height: 80px;
  background-color: rgb(84, 181, 176);
  border: 2px solid rgb(243, 231, 7);
  margin: 0 auto;
}
.menu img{
  display: block;
   height: 80px;
    width: 80px;
     position: absolute;
     left: 0;top: 0;
    }
.one{/*导航栏中的一级目录*/
  margin-left: 15px;/*为了和logo隔开间距*/
  margin-top: 20px;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  width: 130px;
  float: left;
}
.two{/*二级子导航栏*/

  margin-top: 5px;/*和一级导航栏底部隔开距离*/
  text-decoration: none;
  list-style: none;
  background-color: rgb(163, 233, 198);
  line-height: 50px;
  display: none;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius:5%;
}
.one .one_a{
  text-decoration: none;
  color: rgb(12, 93, 104);
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
}
.one_a:hover{
  color: rgb(11, 122, 5);
  transition: all ease-in 1s;
}
.two li{
  border-bottom: dashed 1px rgb(243, 140, 5);
}
.two li a{
  letter-spacing: 5px;
  font-weight: bold;
  font-size: 16px;
   color: rgb(160, 87, 206);}
.one .two a:hover{
  color: rgb(7, 71, 161);
  transition: all ease-in 1s;
}
.menu .one:hover .two {
  display: block;
}


<div class="nav">
  <ul class="menu">
    <a href="index.html">
      <img src="./images/logo.png" alt=""  >
    </a>
    <li class="one" style="margin-left: 150px;">
        <a href="index.html" class="one_a">主页</a>
    </li>
    <li class="one">
        <a href="#"  class="one_a">文案写作</a>
        <ul class="two">
            <li><a href="https://xiezuocat.com/#/" target="_blank">秘塔写作猫</a></li>
            <li><a href="https://www.doujiju.com/" target="_blank">抖几句</a></li>
            <li><a href="https://www.heyfriday.cn/home" target="_blank">HeyFriday</a> </li>
            <li><a href="http://www.duxieren.com/" target="_blank">读写人</a></li>
            <li><a href="https://www.bbjkw.net/" target="_blank">贝贝文章网</a> </li>
            <li><a href="https://zhaotaici.cn/" target="_blank">找台词</a> </li>
        </ul>
    </li>
    <li class="one">
        <a href="#" class="one_a">情报数据</a>
        <ul class="two">
            <li><a href="https://ks.huitun.com/#/dashboard" target="_blank">灰豚数据</a></li>
            <li><a href="https://www.mktindex.com/home/?f=360_SEM_jingpin_C_J_2022042401" target="_blank">魔镜市场情报</a></li>
            <li><a href="http://www.qian-gua.com/Home/IndexAnalysisTool" target="_blank">千瓜数据</a> </li>
            <li><a href="https://dy.feigua.cn/home/Product/?chl=360jingpin" target="_blank">飞瓜数据</a> </li>
            <li><a href="https://trendinsight.oceanengine.com/" target="_blank">巨量算数</a> </li>
            <li><a href="http://guozhivip.com/rank/" target="_blank">果汁排行榜</a> </li>
        </ul>
    </li>
    <li class="one">
        <a href="#"  class="one_a">市场运营</a>
        <ul class="two">
            <li><a href="https://cc.oceanengine.com/" target="_blank">巨量创意</a></li>
            <li><a href="https://www.meihua.info/" target="_blank">梅花网</a></li>
            <li><a href="https://www.niaogebiji.com/" target="_blank">鸟哥笔记</a> </li>
            <li><a href="https://index.baidu.com/v2/index.html#/" target="_blank">百度指数</a> </li>
            <li><a href="https://www.yunyingpai.com/" target="_blank">运营派</a> </li>
        </ul>
    </li>
    <li class="one">
        <a href="product.html"  class="one_a">创作指南</a>
    </li>
    <li class="one">
        <a href="news.html"  class="one_a">红柿动态</a>
    </li>
    <li class="one ">
        <a href="case.html"  class="one_a">案例</a>
    </li>
    <li class="one">
        <a href="about.html"  class="one_a">关于</a>
    </li>
</ul>
</div>

定位问题，你给最上面标题栏设置绝对定位固定在最上面的位置，脱离了文档流他就不会对下面的元素造成影响，然后下面内容需要设置margin-top，就可以了应该

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7493286
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：通过HTML和CSS制作二级菜单栏
  • 除此之外, 这篇博客: css 如何实现按钮点击并移开后，动态变化的反馈效果中的 二、看两个例子 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 实例 1 的地址：https://kylebing.cn/tools/icon-fa/

    请添加图片描述

    请添加图片描述

  • 以下回答由chatgpt基于相关博客总结生成:

    针对问题1：二级子菜单显示的时候会把下面的其他内容挤到一边的问题，建议使用绝对定位的方式来解决。首先，在CSS里找到二级菜单的样式，给它的父元素设置position: relative;，再给它自身设置position: absolute;和left:0; top:100%;来将它的位置相对于父元素进行定位。同时，给它的父元素设置min-height使它的高度自适应，避免出现覆盖其他内容的情况。

    下面是一个示例代码：

    <!-- HTML代码 -->
<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li>
      <a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
  </ul>
</nav>

<!-- CSS代码 -->
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative; /* 设置position为relative */
}

nav ul li ul {
  display: none;
  position: absolute; /* 设置position为absolute */
  left: 0; /* 调整在左边显示 */
  top: 100%; /* 调整在父元素下方 */
}

nav ul li:hover > ul {
  display: block;
  min-height: 20px; /* 给父元素设置min-height */
}

    针对问题2：主页的二级子菜单不显示以及图像被挤到下面的问题，可能是CSS选择器的优先级问题导致的样式被覆盖。建议检查一下CSS代码，看看是不是有其他样式给二级子菜单设置了display:none导致不显示。另外，可以使用浏览器的开发者工具查看元素的样式和渲染，可以更快地定位问题。

    下面是一个示例代码：

    <!-- HTML代码 -->
<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li>
      <a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
  </ul>
</nav>

<!-- CSS代码 -->
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}

nav ul li:hover > ul {
  display: block;
}

nav ul li:hover a {
  color: #fff; /* 给a标签设置样式 */
}

    以上仅供参考，具体的问题需要根据实际情况具体分析。