个人中心
gpt4 book ai didi

html - 尝试悬停时子菜单消失

转载 作者：太空宇宙 更新时间：2023-11-04 01:05:16 25 4
gpt4 key购买 nike

我正在尝试重新创建网站模板，但我的菜单和子菜单存在一些问题。当我想将鼠标悬停在子菜单上时它消失了，而且我知道它可能来自那个间隙(边距)，但是我可以在不删除边距的情况下做什么？

这是我的完整代码:http://dontpad.com/claustack

这是我要复制的模板:https://www.templatemonster.com/demo/69211.html 

<body>
 <div class="nav center">
 <img src="logo.png"/ id="logo">
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>
</body>

CSS:

html,body {
 margin:0;
 width:100%;
 height:100%;
 padding:0;
 }

.center {
  margin:0 auto;
  display:table;
  }

li {
 list-style: none;
}

#logo {
 float:left;
 position:absolute;
 left:-350px;
 top:50px;
}

.nav {
  position:relative;
  padding-top:90px;
  padding-bottom:90px;
 }

 .nav ul li {
   float:left;
   font-size:16px;
   padding:0 30px;
 }

 .nav ul li a {
   color:black;
  }

 .nav ul li a:hover {
   color:#00bb6d;
   text-decoration: none;
  }

 .subMenuBox1 {
   width:330px;
   height:150px;
   border-bottom:2px solid green;
   display:none;
   box-shadow:0 0 5px 0 gray;
   margin-top:30px;
   z-index:999;
   background-color:white;
  }

 .subMenu1 {
   position:absolute;
   z-index:999;
   margin-top:20px;
   }

.subMenu1 li  {
  float:left;
  clear:left;
  margin-bottom:10px;
  }

.subMenu1 li a {
  font-size:12.5px;
  }


 .nav li:hover .subMenu1{
   display:block;
  }

 .nav li:hover .subMenuBox1{
   display:block;
   position:absolute;
    }

最佳答案

补偿边距

您的代码有 20 像素的边距 margin-top:20px;。如果将其设置为零并将其与 padding-top:20px; 一起使用，它会起作用。

它仍然有点乱，但是那部分就够了:)

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.center {
  margin: 0 auto;
  display: table;
}

li {
  list-style: none;
}

#logo {
  float: left;
  position: absolute;
  left: -350px;
  top: 50px;
}

.nav {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}

.nav ul li {
  float: left;
  font-size: 16px;
  padding: 0 30px;
}

.nav ul li a {
  color: black;
}

.nav ul li a:hover {
  color: #00bb6d;
  text-decoration: none;
}

.subMenuBox1 {
  width: 250px;
  height: 150px;
  border-bottom: 2px solid green;
  display: none;
  box-shadow: 0 0 5px 0 gray;
  margin-top: 30px;
  z-index: 999;
  background-color: white;
}

.subMenu1,
.subMenu2 {
  position: absolute;
  z-index: 999;
  margin-top: 20px;
  padding: 0;
}

.subMenu1 li,
.subMenu2 li {
  float: left;
  clear: left;
  margin-bottom: 10px;
}

.subMenu1 li a,
.subMenu2 li a {
  font-size: 12.5px;
}

.subMenu2 {
  left: 100px;
  /*border-left: 1px solid #333;*/
}

.nav li:hover .subMenuBox1 {
  display: block;
  position: absolute;
  margin-top: 0;
}
<div class="nav center">
  <img src="logo.png" / id="logo">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

关于html - 尝试悬停时子菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52353212/

25 4 0
文章推荐： html - 删除div中的空白空间
文章推荐： c - 设置函数指针 C
文章推荐： python - 关于python的sqlite3中create table and transaction的问题
文章推荐： c - hiredis "undefined reference to"编译错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com