css выпадающее меню не отображается

Question

Здравствуйте, ребята, я просто научился создавать горизонтальное выпадающее меню.
что я получаю, это обратный результат. раскрывающийся предъявляются, когда он не в парениях состояния (наоборот), а другое родительского меню только капельный совмещается с первым выпадающего меню

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