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

Hello guys I'm just learning to create horizontal dropdown menu.
what i'm get is the reverse result. the dropdown is showed when it not in hover state (vice versa) and the other parent menu just drop aligned with the first drop down menu 

.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>

я использую фаерфокс 42.0


dropdown css
person Denny Rachmadi    schedule 21.11.2015    source источник
comment
Возможный дубликат CSS выпадающего меню   -  person Berendschot    schedule 21.11.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете продолжить кодирование кода ниже, у него есть правильное начало для вас с горизонтальным меню с подменю:

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>, и я думаю, что это некоторые проблемы с позиционированием и стилем отображения.

person Rashwan L    schedule 21.11.2015
comment
просто и идеально @Rashwan-Lazkani. - person Denny Rachmadi; 22.11.2015

arrow_upward
0
arrow_downward

Вы устанавливаете opacity: 0 в состояние :hover. Вы должны сделать что-то вроде этого:

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

взгляните на этот пример

person Emanuele Spatola    schedule 21.11.2015