postadd hover to promotion

Posted on

add hover to promotion

  1. add class=”has-mega-menu” to li
  2. add div class=”mega-menu”
  3. add class=”row” div
  4. add class=”col-xs-4 col-md-4” //here is the bootstrap desigining ,could be changed according to the different layout
  5. add class=”img-holder”
  6. add a
  7. add img
  8. add ul and li

here is the code 

<li class="has-mega-menu"><a href="@Url.RouteUrl("Topic", new {SeName = Html.GetTopicSeName("promotions") })">PROMOTIONS</a>

   <div class="top-menu-triangle"></div>
    <div class="mega-menu">
        <div class="row">
            <div class="col-xs-4 col-md-4 "  >
                <div class="img-holder">
                    <a href="products-on-promotion">
                    <img style="width:50%;height:50%;float:left" src="../../Content/images/step1.png" >
                    <ul style="float:left;margin-top:5px;text-align:left">
                        <li style="list-style:none;color:#757b81">Enjoy our website</li>
                        <li style="list-style:none;color:#757b81">Enjoy our promotion</li>
                        <li style="list-style:none;color:#757b81">Enjoy your account</li>
                    </ul>
                   </a>
                </div>

            </div>
            <div class="col-xs-4 col-md-4">
                <div class="img-holder">
                    <a href="products-on-promotion">
                    <img style="width:50%;height:50%;float:left" src="../../Content/images/step2.png" >
                    <ul style="float:left;margin-top:5px;text-align:left ">
                        <li style="list-style:none;color:#757b81">Find your items</li>
                        <li style="list-style:none;color:#757b81">Add to shopping cart</li>
                        <li style="list-style:none;color:#757b81">Just check out</li>
                    </ul>
                   </a>
                </div>
            </div>
            <div class="col-xs-4 col-md-4" >
                <div class="img-holder">
                    <a href="products-on-promotion">
                    <img style="width:50%;height:50%;float:left" src="../../Content/images/step3.png" >
                    <ul style="float:left;margin-top:5px;text-align:left">
                        <li style="list-style:none;color:#757b81">Convenient</li>
                        <li style="list-style:none;color:#757b81">Fast</li>
                        <li style="list-style:none;color:#757b81">Easy</li>
                    </ul>
                   </a>
                </div>

        </div>
    </div>