easy but stuck here for more than 2 days. so can someone help me its easy but i couldnot. Thank you for your help

Question

what im trying to do is "when i hover over fruits; rarefruits common fruit and juice must come below it(fruits) and vegetable must be on same place( must not move ) but its going below i knew why its doing so (maxheight :1000px) but couldnot solve it too. so im stuck here for 24 hr and more. and the transition im trying to use is fold out in mega drop down menu

<html>
<head>
  <title>dropdownwithtransitionfoldout</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="dropdownwithtransitionfoldout.css"></head>

    <body>


<div class ="dropdown">
<nav class="nav">
<ul>



<li>
<a class="nav-main-menu" href="">fruits</a>
<ul>
<div class="main-menu-list">




        <div class="main-menu-list-items"><h2 class="main-menu-list-name">rareFruits</h2>
                  <ul>
                  <li><a href="">a</a></li>
                  <li><a href="">b</a></li>
                  <li><a href="">c</a></li>
                  <li><a href="">d</a></li>
                  <li><a href="">e</a></li>
                  <li><a href="">f</a></li>
                  <li><a href="">g</a></li>
                  <li><a href="">h</a></li>
                  <li><a href="">i</a></li>
                  <li><a href="">j</a></li>
                  <li><a href="#"><h3 class="h3">ALL rare fruits </h3></a></li>
                </ul> 
        </div>



        <div class="main-menu-list-items"><h2 class="main-menu-list-name"> commonfruit</h2>
                <ul>
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
                  <li><a href="">4</a></li>
                  <li><a href="">5</a></li>
                  <li><a href="#"><h3 class="h3">ALL commonfruits </h3></a></li>
                 </ul>

        </div>


        <div class="main-menu-list-items"><h2 class="main-menu-list-name">juice</h2>
                  <ul>
                  <li><a href="">Link 01</a></li>
                  <li><a href="">Link 02</a></li>
                  <li><a href="">Link 03</a></li>
                  <li><a href="">Link 04</a></li>
                  <li><a href="">Link 05</a></li>
                  <li><a href="#"><h3 class="h3">ALL juice </h3></a></li>
                  </ul>

        </div>



</div>  <!-- main-menu-list -->
</ul>   <!-- allfruitsandvegetables -->
</li>



<!-- ------------------------------------------------------------------------- -->

<li>
<a class="nav-main-menu" href="">vegetable</a>
<ul>
<div class="main-menu-list">




        <div class="main-menu-list-items"><h2 class="main-menu-list-name">rarevegetable</h2>
                  <ul>
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
                  <li><a href="">4</a></li>
                  <li><a href="">5</a></li>
                  <li><a href="">6</a></li>
                  <li><a href="">7</a></li>
                  <li><a href="">8</a></li>
                  <li><a href="">9</a></li>
                  <li><a href="">10</a></li>
                  <li><a href="#"><h3 class="h3">ALL rarevegetable </h3></a></li>
                </ul> 
        </div>



        <div class="main-menu-list-items"><h2 class="main-menu-list-name">commonvegetables</h2>
                <ul>
                  <li><a href="">a</a></li>
                  <li><a href="">x</a></li>
                  <li><a href="">y</a></li>
                  <li><a href="">z</a></li>
                  <li><a href="">k</a></li>
                  <li><a href="#"><h3 class="h3">ALL commonvegetables </h3></a></li>
                 </ul>

        </div>





</div>  <!-- main-menu-list -->
</ul>   <!-- vegetables--> 
</li>



<!-- ---------------->
</ul>   
</nav>   
</div>              













<head>
</body>



----------------------------------------------------------------------------
   css here


* {
  box-sizing: border-box;
}

* {text-decoration:none;}

.dropdown{
 width:100%;
 margin:5px;
background-color: grey;
list-style:none;
}

.nav ul {
    list-style:none;
  }

.nav ul:before,.nav ul:after {
    content:"";
    display:block;
}
.nav ul:after {
    clear:both;
}


.nav-main-menu {
    float:left;
    position:relative;
      display: block;
      padding: 18px 43px;
      font-weight: bold;
      font-size: 25px;

}

.nav a {
    display:block;
    padding:20px 20px;
    color:yellow;
}

.main-menu-list-items{
   width: 20%;
   float:left;
   padding:5px;

}

.main-menu-list-name:first-of-type{
  margin: 0;
}



.main-menu-list a{
   padding: 0;
  margin-bottom: 6px; 
}

.main-menu-list li{
  display: block;
  padding: 12px 5px 4px 10px;
}



.main-menu-list:hover .nav-main-menu{
  display: block;
}


.main-menu-list{
  padding: 22px 100px 20px 20px;
}

.nav li ul {
    position: static;

    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
.nav ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}

Welcome to the Treehouse Community

Looking to learn something new?

krishna aryal

krishna aryal

easy but stuck here for more than 2 days. so can someone help me its easy but i couldnot. Thank you for your help

Timothy Schmidt

Timothy Schmidt