账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    关于下拉菜单重叠的问题
    24
    0

    问题描述

    下拉菜单里li的第一个和ul的同级元素重叠

    问题出现的环境背景及自己尝试过哪些方法

    尝试过加定位无果

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）
    HTML

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站</title>
  <link rel="shortcut icon" href="https://www.mi.com/favicon.ico" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!-- 顶部 -->
  <div class="topbar">
    <!-- 顶部容器 -->
    <div class="container">
      <!-- 导航 -->
      <div class="topbar-nav">
        <a href="#">小米商城</a> <span>|</span>
        <a href="#">MIUI</a><span>|</span>
        <a href="#">IoT</a><span>|</span>
        <a href="#">云服务</a><span>|</span>
        <a href="#">金融</a> <span>|</span>
        <a href="#">有品</a><span>|</span>
        <a href="#">小爱开放平台</a><span>|</span>
        <a href="#">政企服务</a><span>|</span>
        <a href="#">下载 app</a> <span>|</span>
        <a href="#">Select Region</a><span>|</span>
      </div>
      <!-- 导航 Over -->

      <!-- 购物车 -->
      <div class="topbar-cart">
        <a href="#">购物车<span>(0)</span></a>
      </div>
      <!-- 购物车 Over -->

      <!-- 消息信息 -->
      <div class="topbar-info">
        <span class="user-dropdown">
          <a href="#">两点三横</a>
          <ul>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">评价晒单</a></li>
            <li><a href="#">我的喜欢</a></li>
            <li><a href="#">小米账户</a></li>
            <li><a href="#">退出登录</a></li>
          </ul>
        </span>
        <span>|</span>
        <a href="#">注册</a><span>|</span>
        <a href="#" class="sep">消息通知</a><span>|</span>
      </div>
      <!-- 消息信息 Over -->
    </div>
    <!-- 顶部容器 Over -->
  </div>
  <!-- 顶部  Over -->
</body>

</html>

    CSS

    * {
  margin: 0;
  padding: 0;
}

body {
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  height: 8000px;
}
a {
  text-decoration: none;
}

.topbar {
  background: #333333;
}

.container {
  width: 1226px;
  /* 居中 */
  margin: 0 auto;
}

.container::before,
.container::after {
  content: "";
  display: table;
}

.container::after {
  clear: both;
}

.topbar a {
  color: #b0b0b0;
  font-size: 12px;
}

.topbar a:hover {
  color: white;
}

.topbar-nav {
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 0px;
}

.topbar-nav span {
  font-size: 12px;
  color: #424242;
  font-family: sans-serif;
  margin: 0.5em;
}

.topbar-info,
.topbar-cart {
  float: right;
}

.topbar-cart a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 120px;
  background-color: #424242;
}

.topbar-cart a:hover {
  color: #ff6700;
  background-color: #fff;
}

.topbar-cart span {
  font-size: 12px;
  margin-left: -4px;
}

.topbar-info a {
  float: left;
  padding: 0px 5px;
  height: 40px;
  line-height: 40px;
}

.topbar-info {
  margin-right: 15px;
}

.topbar-info span {
  float: left;
  font-family: sans-serif;
  color: #424242;
  height: 40px;
  line-height: 40px;
}

.topbar-info .sep {
  padding: 0 10px;
}
.user-dropdown{
  display: inline-block;
  width: 130px;
}

.user-dropdown ul{
    list-style-type: none;
    display: none;
    position: absolute;
}
.user-dropdown:hover{
  background: #fff;
}
.user-dropdown:hover ul{
  display: block;
}

    你期待的结果是什么？实际看到的错误信息又是什么？

    不重叠 为什么会出现重叠的原因 感谢

    还有个问题：网页放大之后 右上角会出现大片白色背景

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 以爲很愛。 普通会员 1楼

      在使用JavaScript和HTML制作下拉菜单时，可能会遇到下拉菜单重叠的问题。这通常是由于在下拉菜单的父元素中添加了类名，导致子元素被覆盖了。为了解决这个问题，可以尝试以下方法：

      1. 将下拉菜单的父元素添加一个类名，然后在子元素中使用这个类名。例如，可以使用<div class="my-menu">来创建一个父元素，然后在子元素中添加my-menu类。

      ```html

      Option 1
      Option 2
      Option 3

      ```

      1. 在子元素中使用display属性来设置下拉菜单的显示方式。例如，可以使用display: none来隐藏下拉菜单，然后在需要时使用display: block来显示它。

      ```html

      Option 1
      Option 2
      Option 3

      ```

      1. 使用CSS来控制下拉菜单的显示和隐藏。例如，可以使用position: absolute来将下拉菜单设置为绝对定位，然后使用z-index属性来设置其在其他元素中的堆叠顺序。

      ```html

      Option 1
      Option 2
      Option 3

      ```

      1. 使用JavaScript来监听下拉菜单的更改，并在需要时重新显示它。例如，可以使用window.onload事件来监听页面加载完成，然后使用document.getElementById来获取下拉菜单的父元素，并在其上添加my-menu类。

      javascript window.onload = function() { var myMenu = document.getElementById("my-menu"); myMenu.classList.add("my-menu"); };

      以上方法可以解决下拉菜单重叠的问题。根据实际情况，选择最合适的解决方法。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部