Css Horizontal Dropdown Menu Visibility

Question

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 parent CSS which have some problem :

#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);
}

Basically I want to display menu Products in which there 6 other products. I want that when I hover on products there all the other 6 products should be displayed. But due to my parents CSS file there is a problem. Its working fine when I implement it separately.

This is what i want- http://codepen.io/anon/pen/Gjmjjb but due to parent CSS file i can't implement it .

Please have a look to it. I am just doing a small mistake but i don't know where.

and make sur ethat your new CSS is well formatted. It is missing ; in couple of places. — Vladimir M, Sep 26 '16 at 13:10
Yes i have updated my HTML and CSS . By mistake i have wrote that

score 0 · Answer 1 · 2016-09-26T13:23:45.043

0

I can't 100% tell if it's the cause of the issue, but the problem may well be the nesting of <li> elements. I can't think of any reason why you'd want to be nesting <li> elements inside other <li> elements the way you are: <li> is designed to denote a list item, <li> should not be used to denote a set of list items, so you're either going to want to use <ul> or <span> or <div> depending on exactly the behaviors and look/layout you're aiming for. Until you've fixed this issue your CSS is never going to behave quite the way you expected it to.

If you fix this problem and it's still not functioning as expected, post your updated code and I'll take a look, see what other issues I can find. However, I would highly recommend fixing this basic problem first, because even if you found a way to fix the CSS to function as desired, using HTML elements incorrectly is always likely to cause problems down the line.

edited Sep 26 '16 at 13:23

answered Sep 26 '16 at 13:13

I am sorry By mistake i uploaded a wrong HTML content . Yes i have corrected the whole HTML Now as said . – Himanshu Chawla Sep 26 '16 at 16:01
Products
- POLO
- Lembo
- Dukati
- BMW
- Porsche
- Audi
– Himanshu Chawla Sep 26 '16 at 16:04
I have updated My CSS by putting ; in the end of the code . I have also updated the HTML by updating
- tag. But Now also problem remains the same . I am not getting where exactly the problem is . Please have a look and help me to resolve it .
– Himanshu Chawla Sep 26 '16 at 16:07
You still have several `
` direct children of `
`, which should not happen. There's a post here: https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list which should be helpful to you in fixing the list properly.

Sep 27 '16 at 11:39

Css Horizontal Dropdown Menu Visibility

1 Answers1