css dropdown menu not displayed

Denny Rachmadi Source

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>

im using firefox 42.0

cssdropdown

Answers

answered 3 years ago Rashwan L #1

You could continue your coding on the code below it has the right start for you with the horizontal menu with submenus:

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>

Regarding your code: You are missing among other styling for <ul> and I think it's some issues with the positioning and display styling.

answered 3 years ago Emanuele Spatola #2

You set opacity: 0 in the :hover state. You should do something like this:

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

have a look at this example

comments powered by Disqus