带有填充的多级下拉菜单在进入子菜单时不会消失

Question

视觉说话：

＆＃13;

＆＃13;

/* GENERAL STYLE */
#nav {
  background: green;
  height: 50px;
  width: 100%;
}

/* Category red */
.category{
  position: relative;  
  background: red;
}

/* highlight category items on hover */
.category:hover {
  background-color: blue;
}

/* float and size li's */
#nav li {  
  float: left;
  line-height: 50px;
  padding: 0 10px;
  margin-top:-1px;
  border: 1px solid white;
}

/* default off */
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

/* a default off */
a {
  text-decoration: none;
  color: #fff;
}

/* hover effect */
li:hover{
  opacity: 0.6;
}

/* GENERAL STYLE END */


/* hide dropdowns */
.dropdown {
  display: none;
  position: absolute;
  background: yellow;  
  padding: 10px;
}


.category:hover>.dropdown{
  display: block;
}

/* #nav ul li > ul > li */
 .dropdown li{
  position: relative;
  background: orange;
  margin: 0;
  padding: 0;  
  text-align: center;
  text-transform: capitalize;
}

.dropdown-subcategory{
  white-space:nowrap;
}

/* #nav ul li > ul > li > ul */
 .dropdown-subcategory .dropdown{
  display: none;
  position: absolute;
  left:110%;
  background: red;    
  text-align: center;
  top: 0;
}


.dropdown li:hover ul {
  display: block;
}


#nav .subcategory-item {
  background: green;
  color: #000;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

＆＃13;

<div id="nav">
  <ul>
    <li class="category">
      <a>Category</a>
      <ul class="dropdown">
        <li class="dropdown-subcategory">
          <a>Category Item 1</a>
          <ul class="dropdown">
            <li class="subcategory-item"><a>Subcategory Item 1</a></li>
            <li class="subcategory-item"><a>Subcategory Item 2</a></li>
            <li class="subcategory-item"><a>Subcategory Item 3</a></li>
            <li class="subcategory-item"><a>Subcategory Item 4</a></li>
          </ul>
        </li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

我想从类别第1项悬停到子类别第1项，但是当我尝试将光标移动到它时，子菜单下拉列表会消失。当您快速移动鼠标时，子菜单会停留，但我认为期望用户具有这种敏捷度是不明智的。

• 如何在不删除 .dropdown 类 .dropdown 类 padding 的情况下，使用CSS保留子菜单下拉列表？

Answer 1

看看我的代码片段！

将.dropdown-subcategory .dropdown属性left更改为100%可以胜任这项工作！

我删除了padding上10px li的{​​{1}}也是为了表达目的，你不必这样做。请务必使用margin上的padding和li来获得最佳效果。

＆＃13;

＆＃13;

/* GENERAL STYLE */
#nav {
  background: green;
  height: 50px;
  width: 100%;
}

/* Category red */
.category{
  padding: 0 10px;
  position: relative;  
  background: red;
}

/* highlight category items on hover */
.category:hover {
  background-color: blue;
}

/* float and size li's */
#nav li {
  float: left;
  line-height: 50px;
  margin-top:-1px;
  border: 1px solid white;
}

/* default off */
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

/* a default off */
a {
  text-decoration: none;
  color: #fff;
}

/* hover effect */
li:hover{
  opacity: 0.6;
}

/* GENERAL STYLE END */


/* hide dropdowns */
.dropdown {
  display: none;
  position: absolute;
}


.category:hover>.dropdown{
  display: block;
}

/* #nav ul li > ul > li */
.dropdown li{
  position: relative;
  background: yellow;
}
.dropdown li a {
  margin-top: -10px;
  margin-bottom: -10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  background: orange;
}
.dropdown li.subcategory-item a {
  margin-top: -10px;
  margin-bottom: -10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  background: blue;
}

.dropdown-subcategory{
  white-space:nowrap;
}

/* #nav ul li > ul > li > ul */
 .dropdown-subcategory .dropdown{
  display: none;
  position: absolute;
  left:100%;
  top: 0%;
  background: red;    
  text-align: center;
  border: none;
}

.dropdown-subcategory .subcategory-item a{
  background: green;    
}

.dropdown li:hover ul {
  display: block;
}


#nav .subcategory-item {
  background: green;
  color: #000;
  position: relative;
  width: 100%;
}

＆＃13;

<div id="nav">
  <ul>
    <li class="category">
      <a>Category</a>
      <ul class="dropdown">
        <li class="dropdown-subcategory">
          <a>Category Item 1</a>
          <ul class="dropdown">
            <li class="subcategory-item"><a>Subcategory Item 1</a></li>
            <li class="subcategory-item"><a>Subcategory Item 2</a></li>
            <li class="subcategory-item"><a>Subcategory Item 3</a></li>
            <li class="subcategory-item"><a>Subcategory Item 4</a></li>
          </ul>
        </li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
        <li><a>Category Item 1</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;