仅基于CSS的水平多级菜单

Question

我正在动态地生成多层菜单，并且希望该菜单在不使用任何JavaScript of jQuery的情况下正确显示，在此阶段菜单仅为两个级别。

下面是动态生成的菜单结构

<div id="cssmenu">
<ul >
  <li><a href="/en/">Home</a></li>
  <li><a href="/en/">Menu 1</a></li>
  <li><a href="/en/menu2/">Menu 2</a></li>
  <li><a href="/en/menu3/">Menu 3</a></li>
  <li><a href="/en/menu4/">Menu 4</a></li>
  <li><a href="/en/menu5">Menu 5</a>
    <ul class="/en/menu5/menu5-1/">
      <li><a href="">Menu 5.1</a></li>
<li><a href="">Menu 5.2</a></li>
<li><a href="">Menu 5.3</a></li>
    </ul>
  </li>
  <li><a href="/en/menu6/">Menu 6</a></li>
</ul>
</div>

使用JS https://codepen.io/anon/pen/RMrqmQ的多级工作

我需要一个指向好例子的指针，例如，我已经找过了，但是它们都有为UL & li定义的类，而我的动态菜单ul..li则是干净的，这样用户就可以根据那里的需求定制它。

更新

在codepen上工作，https://codepen.io/anon/pen/bvEzwe似乎运行得很好

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

Answer 1

可能会对有所帮助

我把你的悬停部分改为嵌套的ul。我的意思是为悬停和嵌套的direct child selector(>)位置添加ul。

​

 .nav ul {
     list-style: none;
     background-color: #444;
     text-align: center;
     padding: 0;
     margin: 0;
}
 .nav li {
     font-family: 'Oswald', sans-serif;
     font-size: 1.2em;
     line-height: 40px;
     text-align: left;
     position: relative; /* added for it's absolute child */
}
 .nav a {
     text-decoration: none;
     color: #fff;
     display: block;
     padding-left: 15px;
     border-bottom: 1px solid #888;
     transition: .3s background-color;
}
 .nav a:hover {
     background-color: #005f5f;
}
 .nav a.active {
     background-color: #aaa;
     color: #444;
     cursor: default;
}
/* Sub Menus */
 .nav li li {
     font-size: .8em;
}
/******************************************* Style menu for larger screens Using 650px (130px each * 5 items), but ems or other values could be used depending on other factors ********************************************/
 @media screen and (min-width: 650px) {
     .nav li {
         width: 130px;
         border-bottom: none;
         height: 50px;
         line-height: 50px;
         font-size: 1.4em;
         display: inline-block;
         margin-right: -4px;
    }
     .nav a {
         border-bottom: none;
    }
     .nav > ul > li {
         text-align: center;
    }
     .nav > ul > li > a {
         padding-left: 0;
    }
    /* Sub Menus */
     .nav li ul {
         position: absolute;
         display: none;
         width: inherit;
    }
     .nav > ul > li:hover > ul {
         display: block;
    }
     .nav li > ul > li:hover ul { /* change hover to nested li */
         display: block; 
    }
     .nav li > ul > li ul { /* change position to it's nested parent */
         top: 0;
         right: -100%;
    }
     .nav li ul li {
         display: block;
    }
}

<div class="nav">
    <ul>
        <li><a href="/en/">Home</a></li>
        <li><a href="/en/">Menu 1</a></li>
        <li><a href="/en/menu2/">Menu 2</a>
            <ul class="/en/menu5/menu5-1/">
                <li><a href="">Menu 2.1</a></li>
                <li><a href="">Menu 2.2</a>
                    <ul class="/en/menu5/menu5-1/">
                        <li><a href="">Menu 2.2.1</a></li>
                        <li><a href="">Menu 2.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/en/menu3/">Menu 3</a></li>
        <li><a href="/en/menu4/">Menu 4</a></li>
        <li><a href="/en/menu5">Menu 5</a>
            <ul class="/en/menu5/menu5-1/">
                <li><a href="">Menu 5.1</a>
                    <ul class="/en/menu5/menu5-1/">
                        <li><a href="">Menu 5.1.1</a></li>
                        <li><a href="">Menu 5.1.2</a></li>
                    </ul>
                </li>
                <li><a href="">Menu 5.2</a>
                    <ul class="/en/menu5/menu5-1/">
                        <li><a href="">Menu 5.2.1</a></li>
                        <li><a href="">Menu 5.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/en/menu6/">Menu 6</a></li>
    </ul>
</div>

​