Css Horizontal Dropdown Menu Visibility Problem

[Himanshu Chawla]

i am implementing dropdown menu in html on hover by using CSS . But the problem arises when i implement it in My Already developed template .

I am not getting where it is getting wrong . I have set visibility:hidden and visibility:visible on hover but it is still visible.

I am pasting some part of the code which is neccessary for this question . Please help me out .

Here is the HTML CODE:

<nav id="SA-main-menu" role="navigation">
                <ul>
                    <li class="SA-active"><a href="#">Home</a></li>

                    <li class="sub-menu-parent"><a href="#">Products</a>
                        <li class="sub-menu">
                            <li><a href="#">asdsa</a></li>
                            <li><a href="#">dsad</a></li>
                            <li><a href="#">dasdas</a></li>
                            <li><a href="#">dsadsddaxx</a></li>
                            <li><a href="#">qwer</a></li>
                            <li><a href="#">zxcss</a></li>
                        </li>
                    </li>

                    <li><a href="#"> Our Work </a></li>

                    <li><a href="#">Media</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>

Here is my new CSS (Implemented for dropdown menu but not working):

.sub-menu-parent { position: relative; }

.sub-menu { 
  visibility: hidden  /* hides sub-menu */
  opacity: 0 
  position: absolute ;
  top: 100% ;
  left: 0 ;
  width: 100% ;
  transform: translateY(-2em) ;
  z-index: -1 ;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s ;
}

.sub-menu-parent:hover #sub-menu {
  visibility: visible  /* shows sub-menu */
  opacity: 1 ;
  z-index: 1 ;
  transform: translateY(0%) ;
  transition-delay: 0s, 0s, 0.3s ; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

Here is My already developed CSS because of which problem is arising:

#SA-aside #SA-main-menu ul {
  text-align: left;
  margin: 2.2em 0 0 1.8em;
  padding: 0;
}
@media screen and (max-width: 768px) {
  #SA-aside #SA-main-menu ul {
    margin: 0 0 1.8em 0;
  }
}
@media screen and (max-width: 1200px) {
  #SA-aside #SA-main-menu ul {
    margin: 0 0 0.5em 0;
  }
}
#SA-aside #SA-main-menu ul li {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  line-height: 2.1;
}
#SA-aside #SA-main-menu ul li a {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 0.6em;
  font-weight: 300;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  padding: 8px 8px;
  letter-spacing: .1em;
  font-family: "stoneart", Arial, sans-serif;
}
#SA-aside #SA-main-menu ul li a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 7px;
  left: 10px;
  right: 10px;
  background-color: #A55847;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#SA-aside #SA-main-menu ul li a:hover {
  text-decoration: none;
  color: black;
}
#SA-aside #SA-main-menu ul li a:hover:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-aside #SA-main-menu ul li.SA-active a {
  color: black;
}
#SA-aside #SA-main-menu ul li.SA-active a:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-main-menu ul li.dropdown {
  display: none;
}
#SA-main-menu ul li:hover ul#SA-sub-menu{
  display: block;
  background-color: #fdf8ee;
  z-index: 112;
}
#SA-main-menu ul li ul#SA-sub-menu{
  display: none;
  background: #ffffff;
  position: relative;
  width: 100%;
  margin: -8em 0 0 5em;
  padding-top: 1.5em;
  padding-bottom: 0.5em;
  z-index: 112;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -o-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
}
#SA-main-menu ul li ul#SA-sub-menu li {
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  line-height: 1.5;
}
#SA-main-menu ul li ul#SA-sub-menu li a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 10px;
  font-weight: 300;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  font-family: "stoneart", Times, serif;
}
#SA-main-menu ul li ul#SA-sub-menu li a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 7px;
  left: 10px;
  right: 10px;
  background-color: #A55847;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#SA-main-menu ul li ul#SA-sub-menu ul li a:hover {
  text-decoration: none;
  color: black;
}
#SA-main-menu ul li ul#SA-sub-menu ul li a:hover:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-main-menu ul li ul#SA-sub-menu li.SA-active a {
  color: black;
}
#SA-main-menu ul li ul#SA-sub-menu li.SA-active a:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

[gentlemedia]

You will need to wrap your submenu items in an ul tag as well. The way you have it now is not valid HTML either. Then you could combine visibillity: hidden and opacity: 0 to hide and visibility: visible and opacity: 1 to show on :hover.

Sometime ago another member had also issues with a pure CSS dropdown/submenu which I created a demo for with the following mark-up and CSS to reveal the submenu items.

HTML:

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            </ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

CSS:

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}

Here's the demo link: http://codepen.io/gentlemedia/pen/WwMQJz

Hope this get's you in the right direction.