Question

1）请重新查看代码并提出建议，我发布了我的HTML和CSS代码，CSS转换不起作用。 2）我已经向nav ul.menu li，nav ul.menu li a，＃drop，＃drop li添加了转换 3）

<!DOCTYPE>
            <html>
            <head>
            <title> :: CSS Menu ::</title>
            <link rel="stylesheet" type="text/css" href="styles.css" >
            </head>
            <body>
            <div id="container">
              <nav>
                <ul class="menu">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#" id = "submenu">Gallery</a>
                    <ul class="submenu" id = "drop">
                      <li><a href="#">Gallery1</a></li>
                      <li><a href="#">Gallery2</a></li>
                      <li><a href="#">Gallery3</a></li>
                      <li><a href="#">Gallery4</a></li>
                      <li><a href="#">Gallery5</a></li>
                    </ul>
                  </li>
                  <li><a href="#" id = "submenu">Site Map</a>
                  <ul class="submenu" id = "drop">
                      <li><a href="#">SiteMap1</a></li>
                      <li><a href="#">SiteMap2</a></li>
                      <li><a href="#">SiteMap3</a></li>
                      <li><a href="#">SiteMap4</a></li>
                      <li><a href="#">SiteMap5</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </nav>
            </div>
    //-----------------Transition Script-------------------
            <script>
            $(document).ready( function(){

                $('#submenu').click( function(event){
                    event.stopPropagation();
                    $('#drop').toggle();
                });

                $(document).click( function(){
                    $('#drop').hide();
                });

            });
            </script>
            </body>
            </html>

        //------------------css------------------

        body, html{
            width: 100%;
            margin: 0 auto;
            padding: 0px;
            }
        *{
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
            }
        #container{
            width: 100%;
            float: left;
            margin: 50px 0 0 50px;
            }
        nav ul{
            float: left;
            background-color: #ffa800;
            border-radius: 3px;
            position: relative;
            }
        nav ul.menu li{
            height: 35px;
            float: left;
            display: inline;
            list-style-type: none;
            line-height: 15px;
            padding: 10px 20px;
            position: relative;
            }
        nav ul.menu li a{
            text-decoration: none;
            font: bold 14px Arial, Helvetica, sans-serif;
            color: #fff;
            }
        nav ul.menu li:hover a{
            color: #c14a02;
            }
        nav ul.menu li ul.submenu{
            width: 100%;
            position: absolute;
            top: 35px;
            left: 0;
            display: none;
            background-color: #e5e4e4;
            border: none;
            text-align: center;
            margin: 0px;
            }
        nav ul.menu li:hover ul.submenu{
            display: block;
                }
        nav ul.menu li ul.submenu  li{
            width: 100%;
            text-align: center;
            margin: 0;
            padding: 10px 5px 0 0;
            }
        nav ul.menu li ul.submenu li a{
            color: #464645;
            }
        nav ul.menu li ul.submenu li a:hover{
            color: #ffa800;
            }
        //-------------------------Transition Code---------------- 
        nav ul.menu  li{
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            }
        nav ul.menu  li  a{
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            }
        #drop {
            transition: all 1s;
            -moz-transition: all 1s; 
            -webkit-transition: all 1s;
            }
        #drop li {
            transition: height 0.5s;
            -moz-transition: height 0.5s; 
            -webkit-transition: height 0.5s; 
            }

Answer 1

看起来很有效。 - ＆GT; jsfiddle

此外，最好将您的javascript代码放在head标记内，而不是html的底部。

 <head>
    <title> :: CSS Menu ::</title>
     <link rel="stylesheet" type="text/css" href="styles.css" >


 <script>
            $(document).ready( function(){

                $('#submenu').click( function(event){
                    event.stopPropagation();
                    $('#drop').toggle();
                });

                $(document).click( function(){
                    $('#drop').hide();
                });

            });
</script>

 </head>

Answer 2

<强> DEMO

您可以使用仅限Css代码制作流畅的动画。

提示：在标准之前放置带前缀的CSS。喜欢这个

 -webkit-transform:translateX(0);
     -moz-transform:translateX(0);
     -o-transform:translateX(0);
     transform:translateX(0);

过渡不起作用

2 个答案: