踩坑日记(一)——关于下拉菜单鼠标无法悬停在菜单的问题及下拉菜单写法

最新推荐文章于 2024-05-31 15:07:56 发布

bounceii

最新推荐文章于 2024-05-31 15:07:56 发布

阅读量1.1k

点赞数 2

分类专栏：踩坑及总结文章标签： css

本文链接：https://blog.csdn.net/rjlmylover_zyw/article/details/121588133

版权

踩坑及总结专栏收录该内容

5 篇文章 1 订阅

订阅专栏

问题：鼠标无法悬停在菜单

问题出现的原因：为了实现让下拉按钮和菜单之间有空隙的效果，给菜单div设置了margin-top值。
解决问题办法：不可以给菜单div设置margin-top！
我们可以给下拉按钮定义margin/padding-bottom值，或者给菜单div设置padding值。这样就可以实现下拉按钮与菜单之间有空隙的效果，并且鼠标可以悬停在菜单。

下拉菜单的写法

页面初始化
* {margin：0；padding：0；}
ul li {list-stype-type：none；}
a {text-decoration: none;}
将下拉按钮及菜单内容框入一个大div.dropdown里，.dropdown最好设置display：inline-block；
在.dropdown里再分两块，即下拉按钮和菜单内容
下拉按钮按各自喜好可为span a div
菜单内容用ul li框入，并给菜单内容ul 设置display：none；（隐藏且不占空间）
当鼠标悬停在下拉按钮时，菜单内容display：block；显示

<style>
* {
margin:0;
padding:0;
}

a {
 text-decoration: none;
}

a:hover {
 text-decoration: none;
}

ul li {
 list-style-type: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
  background-color: #f9f9f9;
}
/*注意下面的hover前面是整个下拉菜单*/
.dropdown:hover .dropdown-content {
  display: block;
}
ul li:hover {
 background-color: rgb(204, 164, 79);
}
</style>
<body>
<div class="dropdown">
  <a href="#">下拉按钮</a>
  <ul class="dropdown-content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
</body>

bounceii

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
踩坑日记(一)——关于下拉菜单鼠标无法悬停在菜单的问题及下拉菜单写法

问题：鼠标无法悬停在菜单问题出现的原因：为了实现让下拉按钮和菜单之间有空隙的效果，给菜单div设置了margin-top值。解决问题办法：不可以给菜单div设置margin-top！我们可以给下拉按钮定义margin/padding-bottom值，或者给菜单div设置padding值。这样就可以实现下拉按钮与菜单之间有空隙的效果，并且鼠标可以悬停在菜单。下拉菜单的写法页面初始化* {margin：0；padding：0；}ul li {list-stype-type：none；}a
复制链接

扫一扫