News
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    1323 Views  
Here John gave such a good explanation with example and Demo for Design dropdown using CSS/HTML.
HTML
<body>
<nav>
<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>

         </ul>
         </li>
        </ul>
</nav> 
</body>
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" >

        $(function () {

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

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

                $list.show().css({
                paddingTop: $container.data("origHeight")
                });
                 
                }, function () {

                var $el = $(this);

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

            });

        });

    </script>
CSS
<style type="text/css">
        nav
        {
            width: 750px;
            margin: 1em auto;
        }

        ul
        {
            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;
        }

    </style>
Demo


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



 
Search
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
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: