Here is my JSFiddle.  What I'm trying to do is have a transition effect between two unordered lists.  When you click shop it takes you to the submenu.  When you click shop on  the submenu it takes you back to the main menu.  Why doesn't it slide or have any effect?  My goal is to transition the submenu from right to left, and have main menu transition left to right.  How can I make this work?

&lt;div class="mobile-nav"&gt;
    &lt;ul class="main-mobile-menu transition"&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="SHOP" data-menu-id="shop"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="BRANDS" data-menu-id="brands"&gt;BRANDS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="ABOUT" &gt;ABOUT&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="CONTACT" &gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="shop-submenu" class="hide transition"&gt;
        &lt;li&gt;&lt;a href="#" title="SHOP" data-menu-id="main-mobile-menu"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="ACCESSORIES" data-menu-id="accessories"&gt;ACCESSORIES&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="ART" data-menu-id="art"&gt;ART&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="WOMENS" data-menu-id="womens"&gt;WOMENS&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="MENS" data-menu-id="mens"&gt;MENS&lt;/a&gt;&lt;/li&gt;
        &lt;li class="has-submenu"&gt;&lt;a href="#" title="SHOES" data-menu-id="shoes"&gt;SHOES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="GIFT CERTIFICATE"&gt;GIFT CERTIFICATE&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


This is my CSS:

.mobile-nav{
    position: absolute;
    height: 100%;
    padding: 0px;
    left: 0px;
    top: 0px;
    z-index: 0;
    overflow: hidden;
}

.transition{
    -webkit-transition: none 0.4s ease;
    -moz-transition: none 0.4s ease;
    -ms-transition: none 0.4s ease;
    -o-transition: none 0.4s ease;
    transition: none 0.4s ease;
    -webkit-transition-property: top, right, left, bottom, border;
    -moz-transition-property: top, right, left, bottom, border;
    -ms-transition-property: top, right, left, bottom, border;
    -o-transition-property: top, right, left, bottom, border;
    transition-property: top, right, left, bottom, border;
}

.hide{
    display: none;
}

.open{
    display: block;
}



Question: Generate a custom Enterprise WSDL
Answer: The usual method is manual editing, although it should be possible to use the Eclipse IDE's WSDL editing mode to trim out the extra functions that you don't need. You'll still need to take care not to delete dependencies that are actually required, because Eclipse cannot validate what is or isn't necessary directly.