一共两个问题,第一个:
如图,我的二级子菜单显示的时候会把下面的’红柿动态‘挤到一边,其余几个二级子菜单也有这种情况
第二个问题:我的主页的二级子菜单直接不显示还把下面的图像挤到下面了
怎么解决这两问题呢?以下是导航栏的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>
/*改两个地方*/
.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;// 加这个属性
}
学习。。。