Question

我想创建一个带滑动子菜单项的菜单栏。为此，我编写了以下代码，但转换（向下滑动）效果不适用于悬停。我想只用css做。有人请帮帮我。

<html>
    <head>
        <style type="text/css">
            .menu {
                width: 100%;
                background-color: rgba(250,250,250,0.9);
                box-shadow: 0 2px 2px -2px rgba(0,0,0,0.6);
            }
            .menu ul{
                list-style: none;
                color: #31373d;
                padding: 0;
                margin: 0px 20px;
                position: relative;
            }
            .menu ul li{
                height: 35px;
                line-height: 35px;
                font-weight: 600;
                width: 100px;
                text-align: center;
            .menu >  ul {
                z-index: 0;
            }

            .menu >  ul > li {
                display: inline-block;
                padding: 5px 10px;
                margin: 0;
                margin-right: 5px;
                position: relative;
                cursor: pointer;
                text-shadow: 1px 2px 2px white;
           }
           .menu ul ul {
               display: none;
               height: 0px; /* Height initially set to 0 */
               overflow: hidden;
               background: #f0f0f0;
               -moz-transition: height 0.5s linear;
               text-shadow: 1px 2px 2px #f0f0f0;
               box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
               z-index: 2;
               border: 1px solid #a0a0a0;

               -webkit-transition: height 0.3s linear;
               -moz-transition: height 0.3s linear;
               -o-transition: height 0.3s linear;
               -ms-transition: height 0.3s linear;
               transition: height 0.3s linear;
               left: -23px;
               top: 45px;
           }



           .menu > ul > li:hover ul {
               display: block;
               height: auto; /* Height set to auto for the transition to take effect */
               position: absolute;
           }
           .menu ul ul li{
               width: 200px;
               height: 40px;
               line-height: 40px;
               border-bottom: 1px solid #a0a0a0;
           }
       </style>
   </head>
   <body>
       <div class="menu">
           <ul>
               <li class="newbox">Home
                   <ul>
                       <li>City Home</li>
                       <li>Country Home</li>
                   </ul>
               </li>
               <li class="newbox">About
                   <ul>
                       <li>About Me</li>
                       <li>About others</li>
                       <li>About my family</li>
                   </ul>
               </li>
               <li class="newbox">Contact
                   <ul>
                       <li>Contact Me</li>
                   </ul>
               </li>
           </ul>
       </div>
    </body>
</html>

由于

Answer 1

Actualy身高：自动;当你的页面在mozilla firefox和konqueror中打开时悬停工作正常。你已经忘记了一个braket}我想这就是你的问题所在。我强烈建议使用像notepad ++这样的好编辑器，如果你使用windows，或者使用kate或bluefish，如果你使用linux。它们可以设置为显示颜色，开始和结束braket - each（）[] {}等，这样你可以更好地工作，而不是偶然发现容易错过的错误，特别是如果你累了或分心。

检查出来：

.menu ul li{
                height: 35px;
                line-height: 35px;
                font-weight: 600;
                width: 100px;
                text-align: center;
            .menu >  ul {
                z-index: 0;
            }

为了工作，它应该是：

.menu ul li {
                height: 35px;
                line-height: 35px;
                font-weight: 600;
                width: 100px;
                text-align: center;
}
            .menu >  ul {
                z-index: 0;
            }

一个错误的角色仍然花费我们时间，金钱和神经细胞。使用高级编辑器可以节省大量时间，精力和麻烦。

Answer 2

您不能使用height:auto来转换元素的高度。您必须使用最大高度或特定像素高度才能使转换生效。

.menu > ul > li:hover ul {
    display: block;
    height: 550px;     /* Change from auto to a large number */
    max-height: 100px; /* Add a max-height to prevent it from getting too large */
    position: absolute;
}

假设您正确使用了>运算符，这应该可以正常工作。

使用css进行转换时悬停下滑菜单会出现问题

2 个答案: