将鼠标移离父级时,下拉菜单会消失

时间:2017-09-14 11:10:36

标签: html css

守则:



.dropDown {
  position: relative;
}
.dropDown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropDown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropDown-content a:hover {
  background-color: #f1f1f1;
}
.dropDown:hover + .dropDown-content {
  display: block;
}

<div class="navRight">
  <ul>
    <li class="dropDown"><a href="#">TEST</a></li>
    <div class="dropDown-content">
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
    </div>
    <li><a href="#">TEST</a></li>
    <li><a href="#">TEST</a></li>
    <li><a href="#">TEST</a></li>
  </ul>
</div>
&#13;
&#13;
&#13;

当鼠标悬停在.dropDown时 - 菜单出现,但当鼠标移动到.dropDown-content - 菜单时消失。可能有一个简单的解决方案。

1 个答案:

答案 0 :(得分:2)

您还必须在.dropDown { position: relative; } .dropDown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropDown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropDown-content a:hover { background-color: #f1f1f1; } .dropDown:hover + .dropDown-content, .dropDown + .dropDown-content:hover { display: block; }上显示:

&#13;
&#13;
<div class="navRight">
  <ul>
    <li class="dropDown">
      <a href="#">TEST</a>
    </li>
    <div class="dropDown-content">
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
      <a href="#">TEST</a>
    </div>
    <li><a href="#">TEST</a></li>
    <li><a href="#">TEST</a></li>
    <li><a href="#">TEST</a></li>
  </ul>
</div>
&#13;
- A better function that works just like the original array_diff:
- Compares array1 against one or more other arrays and returns the values in array1 that are not present in any of the other arrays recursively.

    <?php

    function md_array_diff(array $array1, array $array2, array $_ = null) {
        $diff = [];
        $args = array_slice(func_get_args(), 1);

        foreach ($array1 as $key => $value) {
            foreach ($args as $item) {
                if (is_array($item)) {
                    if (array_key_exists($key, $item)) {
                        if (is_array($value) && is_array($item[$key])) {
                            $tmpDiff = md_array_diff($value, $item[$key]);

                            if (!empty($tmpDiff)) {
                                foreach ($tmpDiff as $tmpKey => $tmpValue) {
                                    if (isset($item[$key][$tmpKey])) {
                                        if (is_array($value[$tmpKey]) && is_array($item[$key][$tmpKey])) {
                                            $newDiff = array_diff($value[$tmpKey], $item[$key][$tmpKey]);
                                        } else if ($value[$tmpKey] !== $item[$key][$tmpKey]) {
                                            $newDiff = $value[$tmpKey];
                                        }

                                        if (isset($newDiff)) {
                                            $diff[$key][$tmpKey] = $newDiff;
                                        }
                                    } else {
                                        $diff[$key][$tmpKey] = $tmpDiff;
                                    }
                                }
                            }
                        } else if ($value !== $item[$key]) {
                            $diff[$key] = $value;

                        }
                    } else {
                        $diff[$key] = $value;
                    }
                }
            }
        }

        return $diff;
    }

    $arr1 = [
      "A" => [
        "A1" => ['A1-0', 'A1-1', 'A1-2', 'A1-3'],
        "A2" => ['A2-0', 'A2-1', 'A2-2', 'A2-3'],
        "A3" => ['A3-0', 'A3-1', 'A3-2', 'A3-3']
      ],
      "B" => [
        "B1" => ['B1-0', 'B1-1', 'B1-2', 'B1-3'],
        "B2" => ['B2-0', 'B2-1', 'B2-2', 'B2-3'],
        "B3" => ['B3-0', 'B3-1', 'B3-2', 'B3-3']
      ],
      'C' => 123
    ];

    $arr2 = [
      "A" => [
        "A1" => ['A1-1', 'A1-2', 'A1-3'],
        "A2" => ['A2-0', 'A2-1', 'A2-2', 'A2-3'],
        "A3" => ['A3-0', 'A3-1', 'A3-2']
      ],
      "B" => [
        "B1" => ['B1-0', 'B1-2', 'B1-3'],
        "B2" => ['B2-0', 'B2-1', 'B2-2', 'B2-3'],
        "B3" => ['B3-0', 'B3-1', 'B3-3']
      ]
    ];

    $arr3 = [
      "A" => [
        "A1" => ['A1-0', 'A1-1', 'A1-2', 'A1-3'],
        "A2" => ['A2-0', 'A2-1', 'A2-2', 'A2-3'],
        "A3" => ['A3-0', 'A3-1', 'A3-2']
      ],
      "B" => [
        "B1" => ['B1-0', 'B1-2', 'B1-3'],
        "B2" => ['B2-0', 'B2-1', 'B2-2', 'B2-3'],
        "B3" => ['B3-0', 'B3-1', 'B3-3']
      ]
    ];

    $diff = md_array_diff($arr1, $arr2, $arr3);

    ?>
    Will Output:
    array (size=3)
      'A' =>
          array (size=2)
            'A1' =>
              array (size=1)
                0 => string 'A1-0' (length=4)
            'A3' =>
              array (size=1)
                3 => string 'A3-3' (length=4)
      'B' =>
          array (size=2)
            'B1' =>
              array (size=1)
                1 => string 'B1-1' (length=4)
            'B3' =>
              array (size=1)
                2 => string 'B3-2' (length=4)
      'C' => int 123
&#13;
&#13;
&#13;