* IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. *** 
  May 2 2015 2:06PM     John
  0 Comments    1990 Views  
Here John gave such a good explanation with example and Demo for Design dropdown using CSS/HTML.
<ul class="dropdown">
         <li class="drop"><a href="#">Title</a>
         <ul class="sub_menu">
<li><a href="#">Java Script</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">.NET/C# </a></li>

<script src=""></script>
    <script type="text/javascript" >

        $(function () {

            $(".dropdown > li").hover(function () {

                var $container = $(this),
                $list = $container.find("ul");
                $"origHeight", $container.height());

                paddingTop: $"origHeight")
                }, function () {

                var $el = $(this);

                $el.height($(this).data("origHeight")).find("ul").css({ top: 0 }).hide().end().find("a").removeClass("hover");



<style type="text/css">
            width: 750px;
            margin: 1em auto;

            margin: 0px;
            padding: 0px;
            list-style: none;

        ul.dropdown li
            font-weight: bold;
            float: left;
            width: 180px;
            position: relative;
            background: #ecf0f1;

        ul.dropdown li a
            display: block;
            padding: 20px 8px;
            color: #34495e;
            position: relative;
            z-index: 2000;
            text-align: center;
            text-decoration: none;
            font-weight: 300;

        ul.dropdown ul
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            z-index: 1000;

        ul.dropdown ul li a:hover
            display: block;
            background: #3498db !important;
            color: #fff !important;

        .drop > a:after
            content: "";
            position: absolute;
            right: 10px;
            top: 40%;
            border-left: 5px solid transparent;
            border-top: 5px solid #333;
            border-right: 5px solid transparent;
            z-index: 999;


Hi, This is John.I hope this page will helps you to design dropdown using CSS/HTML.Thanks.

Recent Posts
Create Amazon ElasticCache Using Memcached in CSharp
Oct 29 2018 12:09PM Posted By Amose
Get Google Map Lat Lng (Geo Point) By Pincode in C#
Oct 28 2018 12:09PM Posted By Pranav
Google URL Shortener in C#
Oct 20 2018 12:09PM Posted By Sanjay
Bind Gridview from CSV file in Asp.Net C#
Oct 5 2018 12:09PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Sep 26 2018 12:09PM Posted By John
Gridview custom CSS in ASP.Net
Sep 14 2018 12:09PM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Sep 10 2018 12:09PM Posted By Micheal
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: