Html 我想让纯css水平导航与垂直子菜单和水平子菜单的子菜单

我想修这把小提琴，你看它不太好用。 我想使这个导航水平和子菜单垂直和子菜单的子菜单水平，但问题是，我也使用了这个过渡，但它的工作不正确。 第一个子菜单不会平滑地下降，但会平滑地展开，第三个子菜单不会像平滑滚动和展开一样工作。 我想解决这个问题，我想帮助你解决这个问题。 这是小提琴， 所有代码都包括这个。

css

#nav {
height: auto;
width: auto;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li a:hover {
background-color: #0C3;
 }
 #nav ul li ul {
position: absolute;
visibility: hidden;
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
overflow: hidden;
height: 0px;
 }
 #nav ul li:hover ul {
height: 100px;
visibility: visible;
overflow: visible;
 }
 #nav ul li ul li {
-ms-transition: all 1s;
-o-transition: all 1s;
 }
 #nav ul li ul li a {
background-color: #666;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li ul li a:hover {
background-color: #C30;
 }
 #nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
display: none;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
overflow: hidden;
visibility: hidden;
width: 0px;
 }
 #nav ul li ul li ul li {
float: left;
position: relative;
 }
 #nav ul li ul li:hover ul {
width: 104px;
display: block;
/* [disabled]overflow: visible; */
visibility: visible;
 }

 **html**

<nav id="nav">
 <ul>
   <li><a href="#">Item1</a>
 <ul>
   <li><a href="#">Sub1</a></li>
  <li><a href="#">Sub1</a></li>
   <li><a href="#">Sub1</a>
     <ul>
 <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub2</a></li>
     </ul>

    </li>
   </ul>
  </li>
 </ul>
</nav>

#导航{
高度：自动；
宽度：自动；
}
#导航ul{
边际：0px；
填充：0px；
列表样式类型：无；
}
#李国荣{
浮动：左；
位置：相对位置；
}
#海军ulli a{
线高：30px；
文字装饰：无；
文本对齐：居中；
显示：块；
宽度：100px；
高度：30px；
边框：薄实线#999；
颜色：#FFF；
背景色：#0CF；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
}
#导航ulli a：悬停{
背景色：#0C3；
}
#nav ul li ul{
位置：绝对位置；
可见性：隐藏；
-webkit转换：所有1线性0；
-moz转换：所有1s线性0；
-ms转换：所有1s线性0；
-o-过渡：所有1s线性0s；
过渡：所有1线性0；
溢出：隐藏；
高度：0px；
}
#导航ulli：悬停ul{
高度：100px；
能见度：可见；
溢出：可见；
}
#李国荣{
-ms转换：所有1s；
-o-过渡：所有1s；
}
#纳瓦尔利利亚酒店{
背景色：#666；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
}
#导航：悬停{
背景色：#C30；
}
#nav ul li ul li ul{
位置：绝对位置；
左：102px；
顶部：0px；
显示：无；
-webkit转换：所有1都简化为0；
-moz转换：所有1都是0；
-ms转换：所有1到0；
-o-转换：所有1都是0；
转换：所有1到0；
溢出：隐藏；
可见性：隐藏；
宽度：0px；
}
#纳夫乌利乌利乌利{
浮动：左；
位置：相对位置；
}
#导航ulli：悬停ul{
宽度：104px；
显示：块；
/*[禁用]溢出：可见*/
能见度：可见；
}
**html**

请签出此

我觉得主要的问题是由于能见度和溢出，我们可以转换不透明度和高度虽然

我用了很少的菜单部分。。。我尝试了身高，虽然它也适用于所有人

#nav ul li ul {
    position: absolute; 
    -webkit-transition: height  1s linear 0s;
    -moz-transition: height  1s linear 0s;
    -ms-transition: height  1s linear 0s;
    -o-transition: height  1s linear 0s;
    transition: height 1s linear 0s;    
    height: 0px;
    overflow:hidden;
}
#nav ul li:hover ul {
    height: 100px;

        -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}

---

我希望下面的css能解决你的问题

         #nav {
            height: auto;
            width: auto;
        }
        #nav ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        #nav ul li {
            float: left;
            position: relative;
        }
        #nav ul li a {
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 100px;
            height: 30px;
            border: thin solid #999;
            color: #FFF;
            background-color: #0CF;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            /*transition: all 0.3s ease-out;*/
            transition:display 0s linear 0.5s,opacity 0.5s linear;
        }
        #nav ul li a:hover {
            background-color: #0C3;
        }
        #nav ul li ul {
            position: absolute;
            height:0;
            visibility:hidden;
            opacity:0;
            -webkit-transition: all 1s ease-out;
            -moz-transition: all 1s ease-out;
            -o-transition: all 1s ease-out;
            transition: all 1s ease-out;
        }
        #nav ul li:hover ul {
            opacity:1;
            visibility:visible; 
            overflow: visible;
        }

        #nav ul li ul li a {
            background-color: #666;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }
        #nav ul li ul li a:hover {
            background-color: #C30;
        }
        #nav ul li ul li ul {
            position: absolute;
            left: 102px;
            top: 0px;
            visibility:hidden !important;
            opacity:0 !important;
            -webkit-transition: all 1s ease-out;
            -moz-transition: all 1s ease-out;
            -o-transition: all 1s ease-out;
            transition: all 1s ease-out;
            overflow: hidden;
        }
        #nav ul li ul li:hover .last {
            opacity:1 !important;
            visibility:visible !important;
            overflow: visible;
        }
        #nav ul li ul li .last li{
            float: left;
            position: relative;
        }
        #navul li ul li .last li a {
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 100px;
            height: 30px;
            border: thin solid #999;
            color: #FFF;
            background-color: #0CF;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

HTML

Post your CSS or we can't helps在这里发布代码太难了，但也要在这里将代码发布到JSFIDLE，这是我所有的CSS代码。这不是问题，我也能处理。这不是问题，但问题是sub2没有像sub1那样工作。那么Sub2菜单到哪里去了？？？对不起，兄弟，它没有帮助我想sub1向下滑动，Sub2也一样，我想Sub2水平向左浮动

        <nav id="nav">
          <ul>
            <li><a href="#">Item1</a>
            <ul>
              <li><a href="#">Sub1</a></li>
              <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub1</a>
                 <ul class="last">
                    <li><a href="#">Sub2</a></li>
                    <li><a href="#">Sub2</a></li>
                    <li><a href="#">Sub2</a></li>
                 </ul>

                </li>
            </ul>
            </li>
          </ul>

        </nav>