CSS Dropdown List Not Working in IE or Edge

Question

First, let me just say I am a "tinkerer" when it comes to coding. I can usually dig around the internet, find a suggestion and implement it in short timing. This issue I have been investigating has turned out to be more difficult and for the first time, I've decided to post a help needed request.

I am working to incorporate a CSS based dropdown into my family's business website. The dropdown has a downward sliding affect as it transitions the visibility via CSS. On Firefox and Opera, the DD works with no problems (actually looks really nice). Unfortunately, it doesn't work on any IE or Edge browsers, even after researching and trying out multiple suggestions over the past week. I ran the CSS code through Lint (csslint.net) and it found no errors. I am wondering if the issue might have something to do with the browser extensions in the CSS translate/transform/transition code or if I've missed something with the CSS focus/focus-within/hover code.

Actual Site: http://www.powerstone45.com/ The dropdown I am working on is the one that appears under "Product Category:" (Sorry for the rest of the page being in Japanese)

Here is the relevent code that drives the dropdown:

.sub-menu-parent { 
  font-size: 12px;
  margin: 0 !important;
  display: block;
  height: auto !important;
  line-height: normal !important;
  padding: 5px 10px !important;
  text-decoration: none;
  background-color: #FEFEFE;
  color: #444444;
  cursor: pointer;
}

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background:#fff;
  -webkit-transform: translateY(-2em);
	   -moz-transform: translateY(-2em);
	    -ms-transform: translateY(-2em);
	     -o-transform: translateY(-2em);
          transform: translateY(-2em);
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	 -moz-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	  -ms-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	   -o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
          transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  height: auto !important;
  line-height: normal !important;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	 -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	  -ms-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	   -o-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
		  box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
}

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 1;
-webkit-transform: translateY(0%);
	 -moz-transform: translateY(0%);
	  -ms-transform: translateY(0%);
	   -o-transform: translateY(0%);
  		  transform: translateY(0%);
  -webkit-transition-delay: 0s, 0s, 0.3s;
	   -moz-transition-delay: 0s, 0s, 0.3s;
	    -ms-transition-delay: 0s, 0s, 0.3s;
	     -o-transition-delay: 0s, 0s, 0.3s;
          transition-delay: 0s, 0s, 0.3s;
}

/* presentational */
nav a { color: #444444; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #fff; background: #9264E0;}
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }

nav > ul { background: #fff; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }

.sub-menu {
  background: #fff;
}

#navdd {
			position:relative;
			width:100%;
			margin-top:-15px;
			display:block;
}

<div id="navdd">
  <p>			
    <nav>
      <ul>
        <li class="sub-menu-parent" tab-index="0">
          Bracelet
          <ul class="sub-menu">
            <li><a href="prod_showcase.php?cid=br&rfsh=0">Bracelet</a></li>
            <li><a href="prod_showcase.php?cid=ne&rfsh=0">Necklace</a></li>
            <li><a href="prod_showcase.php?cid=pe&rfsh=0">Pendants</a></li>
            <li><a href="prod_showcase.php?cid=ot&rfsh=0">Other Products</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </p>
</div>

If someone could possibly look at my CSS code and help me sort through to the root cause of this disconnect, I'd be very appreciative!

Answer 1

ie not supprort :focus-within CSS pseudo-class

read this.https://caniuse.com/#feat=css-focus-within

it will work if you remove this .sub-menu-parent:focus-within .sub-menu from your css

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:hover .sub-menu {
    visibility: visible; /* shows sub-menu */
    opacity: 1;
    z-index: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay: 0s, 0s, 0.3s;
    -moz-transition-delay: 0s, 0s, 0.3s;
    -ms-transition-delay: 0s, 0s, 0.3s;
    -o-transition-delay: 0s, 0s, 0.3s;
    transition-delay: 0s, 0s, 0.3s;
}