title: website display issue - Elements in menu-bar not showing when they have sub-menus
body: <p>I developed a website and recognized an error during the cross browser testing.</p>
  
  <p>In Internet Explorer 11 elements in my menu-bar are not shown when they have sub-menus.</p>
  
  <p>Here is an image to show the error:</p>
  
  <p><a href="https://i.stack.imgur.com/siapt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/siapt.jpg" alt="the menu-bar in ie11"></a></p>
  
  <p>In the Edge Browser things are a little bit more tricky. The sub-menu elements are shown in the first place. But when one hovers over the element, so that the sub-menu item list appears and then hover over an element which contains a sub-sub-menu, every menu item with a sub-menu disappears in the menu-bar.</p>
  
  <p>Here is an image from Edge:</p>
  
  <p><a href="https://i.stack.imgur.com/b8vno.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b8vno.jpg" alt="the menu-bar in Edge"></a></p>
  
  <p>The link to my testpage is <a href="http://undefined.bplaced.net" rel="nofollow noreferrer">http://undefined.bplaced.net</a></p>
  
  <p>The menu-bar works well in every other browser I tested (latest version of FireFox, Chrome, Safari, Andriod, iPhone), just the Microsoft browsers are '<em>special</em>'.</p>
  
  <p>I'm not sure where/how to search for that error, maybe it's caused by the CSS (I prefixed my CSS for IE/Edge) or jQuery/JavaScript or maybe it's even the ul li HTML markup, I don't know.</p>
  
  <p>here is the HTML, CSS, and JavaScript I applied to the menu:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
    // add JS-classes into the HTML-Tag
    $('html').addClass('js');
  
    // add classes for sub menus and sub menus toggle button
    $(".site-nav li &gt; ul").parent('li').addClass('has-sub-menu');
    $(".site-nav li &gt; ul").addClass('sub-menu');
  
    // create button for expand- und collapse the menu and render it into the header
    var create_toggle_nav_button = ['&lt;div class="toggle-site-nav"&gt;Menu&lt;/div&gt;'].join("");
    $("header").append(create_toggle_nav_button);
  
    // create button for expand- und collapse the sub menu  for mobile view and add them to all sub menus
    var create_sub_toggle_button = ['&lt;span class="toggle-sub-menu"&gt;&lt;/span&gt;'].join("");
    $(".has-sub-menu &gt; a").after(create_sub_toggle_button);
  
    // define variables
    var $menu = $('.site-nav'),
      $toggle_nav = $('.toggle-site-nav'),
      $toggle_sub_menu = $('.toggle-sub-menu');
  
    // collapse and expand function of the main menu
    $toggle_nav.click(function(e) {
      e.preventDefault();
      $menu.slideToggle();
    });
  
    // collapse and expand function of the drop down menu for mobile view
    $toggle_sub_menu.click(function(e) {
      e.preventDefault();
      var $this = $(this);
      $this.toggleClass('active').next('ul').slideToggle();
    });
  
    // display hidden elements again, when browserwindow is resized by user
    $(window).resize(function() {
      var w = $(window).width();
      if (w &gt; 900) {
        $('.site-nav').removeAttr('style');
        $('.sub-menu').removeAttr('style');
      }
    });
  
    // collapse navigation automatically to the left, when it run out of the viewport
    $(".site-nav .has-sub-menu").on('mouseenter mouseleave', function(e) {
  
      var nav_element = $('ul:first', this);
      var element_offset = nav_element.offset();
      var element_offset_left = element_offset.left;
      var element_width = nav_element.width();
      var viewport_width = $(window).width();
  
      var element_in_viewport = (element_offset_left + element_width &lt;= viewport_width);
  
      if (!element_in_viewport) {
        $(this).addClass('sub-left');
      } else {
        $(this).removeClass('sub-left');
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  body::after {
    content: '';
    position: fixed;
    bottom: 1em;
    right: 1em;
    opacity: 0.5;
    font-size: 0.8em;
    z-index: 10;
  }
  
  header {
    width: 100%;
    background: white;
  }
  
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .logo {
    display: block;
    width: 100%;
    padding: 1em;
    text-decoration: none;
    color: gray;
    /* ? */
  }
  
  .site-nav {
    z-index: 10;
  }
  
  .site-nav&gt;ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
    margin: auto;
  }
  
  .site-nav&gt;ul&gt;li {
    display: inline-block;
    flex-wrap: wrap;
    width: auto;
    padding: 0;
  }
  
  .site-nav a {
    display: inline-flex;
    align-content: stretch;
    padding: 1em;
    white-space: nowrap;
    text-decoration: none;
    height: 100%;
    width: 100%;
    color: white;
    /* text color of all */
    background: #5a595a;
    /* background color main nav Link 1 */
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
  
  .site-nav a:hover {
    background: #8c8e94;
    /* mouseover color Link 1 and Link 1.1 opacity */
  }
  
  .js .site-nav {
    display: none;
  }
  
  .js .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 12;
  }
  
  .js .sub-menu .sub-menu {
    top: 0px;
    right: 100%;
    left: auto;
    text-align: right;
  }
  
  .js .has-sub-menu {
    position: relative;
    top: 100%;
    left: 0px;
  }
  
  .sub-menu li:last-of-type {
    padding-bottom: 0;
  }
  
  .sub-menu a {
    background: #676567;
    /* background color menu 2.1 only */
  }
  
  .sub-menu .sub-menu a {
    background: #747274;
    /* background color menu 2.1.1 only */
  }
  
  .sub-menu .sub-menu a:hover {
    background: #8c8e94;
    /* mouseover color Link 1 and Link 1.1 */
  }
  
  
  /* toggles */
  
  .toggle-site-nav {
    background: #5a595a;
    /* background color of menu button when resized */
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 1em;
    color: white;
    /* text color of the word menu in menu button when resized */
    cursor: pointer;
    z-index: 10;
  }
  
  .toggle-site-nav:hover {
    background: rgba(0, 0, 0, 0.5);
    /* mouseover color of menu button when resized */
  }
  
  .toggle-sub-menu {
    display: none;
  }
  
  .js .toggle-sub-menu {
    display: flex;
    position: absolute;
    align-content: center;
    right: 0em;
    top: 1.05em;
    /* hight of the borders */
    background: #817e81;
    /* backgound of annoying squares when resized */
    height: 15px;
    width: 15px;
    cursor: pointer;
    z-index: 11;
  }
  
  .js .toggle-sub-menu.active {
    background: #DCDCDC;
    /* color of annoying square after clicking on it when resized */
  }
  
  .toggle-sub-menu:hover,
  .toggle-sub-menu.active:hover {
    background-color: rgba(0, 0, 0, 0.4);
    /* mouseover of annoying squares when resized */
  }
  
  @media screen and (min-width:900px) {
    .logo {
      width: auto;
      float: left;
    }
    .site-nav {
      width: auto;
      display: flex !important;
    }
    .site-nav a {
      border: none;
    }
    .site-nav li {
      width: auto;
      padding: 0;
    }
    .site-nav li:hover {
      background: rgba(52, 50, 52, 1);
      /* mouseover background color of all menu */
    }
    .has-sub-menu a {
      padding-right: 2em;
      /* check this value */
    }
    .has-sub-menu:after {
      /* check this for editing the stripes */
      display: block;
      content: '';
      text-indent: -9999px;
      width: 18px;
      height: 18px;
      background: url(http://undefined.bplaced.net/ic_expand_more_18px.svg);
      background-size: 18px 18px;
      position: absolute;
      align-content: center;
      top: 1.0em;
      right: 0.5em;
    }
    /* sub menu */
    .site-nav li:hover&gt;.sub-menu {
      display: block;
      position: absolute;
      width: 300px;
      /* width of sub menus */
      padding: 0 25px 25px 25px;
      left: -25px;
    }
    .sub-menu {
      display: none;
    }
    .sub-menu li {
      width: 100%;
    }
    .sub-menu&gt;a {
      width: 100%;
      display: block;
    }
    .has-sub-menu .has-sub-menu:after {
      display: block;
      content: '';
      text-indent: -9999px;
      width: 18px;
      height: 18px;
      background: url(http://undefined.bplaced.net/ic_chevron_right_18px.svg);
      background-size: 18px 18px;
      position: absolute;
      align-content: center;
      top: 1.0em;
      right: 0.5em;
    }
    .has-sub-menu .has-sub-menu:hover .sub-menu {
      display: block;
      position: absolute;
      width: 300px;
      /* width of subsub menues */
      padding: 0 25px 25px 25px;
      left: 224px;
      top: 0px;
    }
    .toggle-site-nav,
    .toggle-sub-menu {
      display: none !important;
    }
    /* navigations items, which collapse to the left */
    .sub-left&gt;.sub-menu {
      left: auto;
      right: 0;
    }
    .site-nav .sub-menu .sub-left&gt;.sub-menu {
      left: -275px;
    }
  }
  
  @media screen and (max-width: 899px) {
    .site-nav&gt;ul {
      display: block !important;
      width: 100%;
      margin: auto;
    }
    .site-nav&gt;ul&gt;li {
      display: block !important;
      margin: auto;
      width: 100%;
    }
    .site-nav {
      z-index: 13;
      margin-top: 19px;
    }
    .js .toggle-sub-menu {
      display: block;
      position: absolute;
      align-content: center;
      right: 0.3em;
      top: 0.29em;
      /* hight of the borders */
      background: #817e81;
      /* backgound of annoying squares when resized */
      width: 2.7em;
      height: 2.7em;
      cursor: pointer;
      z-index: 11;
    }
    .toggle-sub-menu:before {
      display: block;
      content: '';
      text-indent: -9999px;
      width: 36px;
      height: 36px;
      background: url(http://undefined.bplaced.net/ic_expand_more_36px_wt.svg);
      background-size: 36px 36px;
      position: absolute;
      align-content: center;
      top: 0.2em;
      left: 0.1118em;
    }
    .js .toggle-sub-menu.active {
      background: #141614;
      /* color of annoying square after clicking on it when resized */
    }
    .toggle-sub-menu:hover,
    .toggle-sub-menu.active:hover {
      background-color: #313431;
      /* mouseover of annoying squares when resized */
    }
    .sub-menu {
      display: block;
      margin: auto;
      width: 100%;
      /* width of sub menu */
    }
    .has-sub-menu {
      display: block !important;
      margin: auto !important;
      width: 100% !important;
      /* width of subsub menu */
    }
    /* sub menu */
    .has-sub-menu .has-sub-menu .sub-menu {
      display: none;
      position: relative;
      width: 100%;
      /* width of subsub menues */
      margin: auto;
      left: 0px;
      top: auto;
      z-index: 99999;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
  
    &lt;nav class="site-nav" id="nav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="./index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="./about-us/index.html"&gt;about us&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="./about-us/test-new/index.html"&gt;&lt;span&gt;TEST new&lt;/span&gt;&lt;/a&gt;
              &lt;li&gt;&lt;a href="./about-us/our-team/index.html"&gt;&lt;span&gt;our team&lt;/span&gt;&lt;/a&gt;
                &lt;li&gt;&lt;a href="./about-us/quality/index.html"&gt;&lt;span&gt;quality&lt;/span&gt;&lt;/a&gt;
                  &lt;li&gt;&lt;a href="./about-us/our-offices/index.html"&gt;&lt;span&gt;our offices&lt;/span&gt;&lt;/a&gt;
                    &lt;li&gt;&lt;a href="./about-us/catalog/index.html"&gt;&lt;span&gt;catalog&lt;/span&gt;&lt;/a&gt;
                      &lt;li&gt;&lt;a href="./about-us/map/index.html"&gt;&lt;span&gt;map&lt;/span&gt;&lt;/a&gt;
          &lt;/ul&gt;
          &lt;li&gt;&lt;a href="./Products/index.html"&gt;Products&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="./Products/mainproducts_1/index.html"&gt;&lt;span&gt;mainproducts_1&lt;/span&gt;&lt;/a&gt;
                &lt;li&gt;&lt;a href="./Products/mainproducts_2/index.html"&gt;&lt;span&gt;mainproducts_2&lt;/span&gt;&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="./Products/mainproducts_2/xv/index.html"&gt;&lt;span&gt;xV&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="./Products/mainproducts_2/current/index.html"&gt;&lt;span&gt;current&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;li&gt;&lt;a href="./Products/mainproducts_3/index.html"&gt;&lt;span&gt;mainproducts_3&lt;/span&gt;&lt;/a&gt;
                    &lt;li&gt;&lt;a href="./Products/mainproducts_4/index.html"&gt;&lt;span&gt;mainproducts_4&lt;/span&gt;&lt;/a&gt;
                      &lt;li&gt;&lt;a href="./Products/mainproducts_5/index.html"&gt;&lt;span&gt;mainproducts_5&lt;/span&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="./Products/mainproducts_6/index.html"&gt;&lt;span&gt;mainproducts_6&lt;/span&gt;&lt;/a&gt;
                          &lt;li&gt;&lt;a href="./Products/mainproducts_7/index.html"&gt;&lt;span&gt;mainproducts_7&lt;/span&gt;&lt;/a&gt;
                            &lt;li&gt;&lt;a href="./Products/mainproducts_8/index.html"&gt;&lt;span&gt;mainproducts_8&lt;/span&gt;&lt;/a&gt;
                              &lt;li&gt;&lt;a href="./Products/mainproducts_9/index.html"&gt;&lt;span&gt;mainproducts_9&lt;/span&gt;&lt;/a&gt;
                                &lt;li&gt;&lt;a href="./Products/mainproducts_10/index.html"&gt;&lt;span&gt;mainproducts_10&lt;/span&gt;&lt;/a&gt;
                                  &lt;li&gt;&lt;a href="./Products/mainproducts_11/index.html"&gt;&lt;span&gt;mainproducts_11&lt;/span&gt;&lt;/a&gt;
            &lt;/ul&gt;
            &lt;li&gt;&lt;a href="./testpage2/index.html"&gt;Testpage2&lt;/a&gt;
              &lt;li&gt;&lt;a href="./testpage3/index.html"&gt;Testpage3&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="./testseite3/subpage2_1/index.html"&gt;&lt;span&gt;subpage2_1&lt;/span&gt;&lt;/a&gt;
                    &lt;ul&gt;
                      &lt;li&gt;&lt;a href="./testpage3/subpage2_1/subpage2_2/index.html"&gt;&lt;span&gt;subpage2_2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="./testpage3/subpage2_1/subsubpage_3_1/index.html"&gt;&lt;span&gt;subsubpage_3_1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;li&gt;&lt;a href="./testpage3/test3_1/index.html"&gt;&lt;span&gt;Test3_1&lt;/span&gt;&lt;/a&gt;
                      &lt;li&gt;&lt;a href="./testpage3/test4_1/index.html"&gt;&lt;span&gt;Test4_1&lt;/span&gt;&lt;/a&gt;
                &lt;/ul&gt;
                &lt;li&gt;&lt;a href="./testseite4/index.html"&gt;Testpage4&lt;/a&gt;
                  &lt;li&gt;&lt;a href="./testseite5/index.html"&gt;Testpage5&lt;/a&gt;
                    &lt;li&gt;&lt;a href="./anfrage--kontakt/index.php"&gt;Contact&lt;/a&gt;
                      &lt;li&gt;&lt;a href="./english/index.php"&gt;English&lt;/a&gt;
                      &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is also a link to my pen: <a href="https://codepen.io/undefined999/pen/KydpgX" rel="nofollow noreferrer">pen menu-bar</a></p>
  
  <p>I would really appreciate any hint how to track down this bug.</p>