css 下拉菜单未显示

Question

大家好，我正在学习创建水平下拉菜单。
我得到的是相反的结果。当它不处于悬停状态时显示下拉菜单（反之亦然）并且另一个父菜单只是与第一个下拉菜单对齐

.blok1__navbar{ 
 font-family: open-sans,sans-serif;
 width: 80%;
 margin:0 auto;
 padding: 0px;
}
.blok1__navbar li{
 list-style-type:none;
 display: inline-block;
 background-color: red; 
 padding: 10px 0px 10px 0px; 
}
.blok1__navbar li a{
 padding: 20px;
 text-decoration: none;
 color:#FFF;
}
.blok1__navbar > li > a::after{
 font-family: FontAwesome;
 display: inline-block;
 vertical-align: middle;
 content:"\f105";
 float:right;
 padding-right: 10px;
}

.blok1__navbar > li:hover ul {
    border-top-style: solid;
    border-top-width: 1px;
    left: 0;
    min-width: 200px;    
    opacity: 0;
    position: absolute;
    top: 100%;
    transform: translate3d(0px, 30px, 0px);
    transition: all 0.4s ease-out 0s;
    visibility: visible;
    z-index: 999;
}

<ul class="blok1__navbar">
  <li>
    <a href="#">link 1</a>
    <!-- Start Dropdown -->
    <ul>
      <li><a href="#">link sub 1</a></li>
    </ul>
    <!-- End Dropdown -->
  </li>

  <li><a href="#">link 2</a></li>
  <li><a href="#">link 3</a></li>
  <li><a href="#">text with more length</a></li>
</ul>

我使用的是 firefox 42.0

Answer 1

您可以继续使用下面的代码进行编码，它为您提供了带有子菜单的水平菜单的正确起点：

CSS:

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

HTML:

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</nav>

关于您的代码：您缺少 <ul> 的其他样式，我认为这是定位和显示样式方面的一些问题。

Answer 2

您将 opacity: 0 设置为 :hover 状态。你应该这样做：

.submenu {
  display: none;
}
.menu-item:hover .submenu {
  display: block;
}

看看这个example

css 下拉菜单未显示

css dropdown menu not displayed

css

dropdown