CODEWITHSUNDEEP
htmlcss
Bharat
Bharat

Reputation: 21

Trouble with slide down menu on hover with transition using css

I wanted to created a menu bar with sliding sub-menu items. For this I wrote the following code but the transition (slide down) effect is not working on hover. I want to do it only using css. Someone please help me out.

<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>

Thanks

Upvotes: 0

Views: 556

Answers (2)

user5178505
user5178505

Reputation: 11

Actualy height: auto; works fine on hover when your page gets opened in mozilla firefox and konqueror. You had forgotten one braket } and I suppose that's making your problem. I strongly reccomend using good editor like notepad++ if you use windows, or kate or bluefish if you use linux. They can be set to show you the colors, the starting and ending braket - each () [] {}, etc, so you can work much better and not to stumble at such mistakes that can be easy missed, especially if you are tired or distracted.

Check it out:

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

In order to work it should be:

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

One mistaken charaker still costs us time, money and nerve cells. Usage of advanced editor saves much time, efforts and headaches.

Upvotes: 1

Omar Himada
Omar Himada

Reputation: 2588

You cannot use height:auto to transition the height of elements. You must use either max-height or specific pixel heights in order for the transition to work.

.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;
}

Assuming you used the > operator correctly, this should work fine.

Upvotes: 0

Related Questions