首页 新闻 会员 周边

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

0
[待解决问题]

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

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

怎么解决这两问题呢?以下是导航栏的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>
    </p>
    <li class="one">
        <a href="#"  class="one_a">文案写作</a>
        <ul class="two">
            <p><a href="https://xiezuocat.com/#/" target="_blank">秘塔写作猫</a></p>
            <p><a href="https://www.doujiju.com/" target="_blank">抖几句</a></p>
            <p><a href="https://www.heyfriday.cn/home" target="_blank">HeyFriday</a> </p>
            <p><a href="http://www.duxieren.com/" target="_blank">读写人</a></p>
            <p><a href="https://www.bbjkw.net/" target="_blank">贝贝文章网</a> </p>
            <p><a href="https://zhaotaici.cn/" target="_blank">找台词</a> </p>
        </ul>
    </p>
    <li class="one">
        <a href="#" class="one_a">情报数据</a>
        <ul class="two">
            <p><a href="https://ks.huitun.com/#/dashboard" target="_blank">灰豚数据</a></p>
            <p><a href="https://www.mktindex.com/home/?f=360_SEM_jingpin_C_J_2022042401" target="_blank">魔镜市场情报</a></p>
            <p><a href="http://www.qian-gua.com/Home/IndexAnalysisTool" target="_blank">千瓜数据</a> </p>
            <p><a href="https://dy.feigua.cn/home/Product/?chl=360jingpin" target="_blank">飞瓜数据</a> </p>
            <p><a href="https://trendinsight.oceanengine.com/" target="_blank">巨量算数</a> </p>
            <p><a href="http://guozhivip.com/rank/" target="_blank">果汁排行榜</a> </p>
        </ul>
    </p>
    <li class="one">
        <a href="#"  class="one_a">市场运营</a>
        <ul class="two">
            <p><a href="https://cc.oceanengine.com/" target="_blank">巨量创意</a></p>
            <p><a href="https://www.meihua.info/" target="_blank">梅花网</a></p>
            <p><a href="https://www.niaogebiji.com/" target="_blank">鸟哥笔记</a> </p>
            <p><a href="https://index.baidu.com/v2/index.html#/" target="_blank">百度指数</a> </p>
            <p><a href="https://www.yunyingpai.com/" target="_blank">运营派</a> </p>
        </ul>
    </p>
    <li class="one">
        <a href="product.html"  class="one_a">创作指南</a>
    </p>
    <li class="one">
        <a href="news.html"  class="one_a">红柿动态</a>
    </p>
    <li class="one ">
        <a href="case.html"  class="one_a">案例</a>
    </p>
    <li class="one">
        <a href="about.html"  class="one_a">关于</a>
    </p>
</ul>
</div>
 
YB的小窝的主页 YB的小窝 | 菜鸟二级 | 园豆:206
提问于:2023-06-16 13:46
< >
分享
所有回答(2)
0
/*改两个地方*/  
.one { /*导航栏中的一级目录*/
    margin-left: 15px; /*为了和logo隔开间距*/
    margin-top: 20px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    width: 130px;
    float: left;
    position: relative; // 加这个属性
}

.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%;
    position:absolute;// 加这个属性
    z-index:-1;// 加这个属性
}

三人乐乐 | 园豆:4819 (老鸟四级) | 2023-06-16 17:59
0

学习。。。

tea2007 | 园豆:1 (初学一级) | 2023-06-17 22:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册