Skip to main content

Dropdown Boxes in html

By
This post is about creating Dropdown boxes in html.
<html>
<head>
<title> DropDown</title>

<style media="screen" type="text/css">

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/

.menu a {
    transition:all linear 0.15s;
    color:#919191;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:160%;
    padding:5px 0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
  color:red;
    background:#3e3436;

}
</style>
</head>

 <body>
    <nav class="menu">
        <ul class="clearfix">
       
            <li>
                <a href="#">Animals <span class="arrow">▼</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Reptiles</a></li>
                    <li><a href="#">Insects</a></li>
                    <li><a href="#">Mammals</a></li>
                </ul>
            </li>
        
        </ul>
    </nav> 
</body>
</html>
Post any problem and suggestion in the comments.
 Share the post and like us on Facebook.

Hitesh Bhatia
Editor in chief

Labels:

Comments

Post a Comment

Popular posts from this blog

C-LIBRARIES

By
The C programming language uses libraries as its primary method of extension. In C , a library is a set of functions contained within a single "archive " file . Each library typically has a header life , which contains the prototypes of the functions contained within the library that may be used by a program , and declarations of special data types and macro symbols used with these functions .               The most common C library is the C standard library , which is specified by  the ISO and ANSI C standards and comes functions with every C implementation.     Another common set of C library functions are those used by applications specifically targeted for Unix like systems , especially functions which provide an interface to the kernel.       Libraries are often written in C because C compilers generate efficient object code ; programmers then create interfaces to the li...
Post a Comment
Read more

Removing HTML Tags from string in C#

By
Hello friends, With this very first post of our new Blog GimiBits, we start our whole new journey contributing to information technology. Our First post is about the logic to remove the HTML tags from the given string with C# (C Sharp) programming language. Logic is very Simple to Implement, we take up a string and for its each index char we find the opening '<' braces and ignores the inside content until the closing '>' braces is not encountered and save to another char[] datatype. Here is a function based Implementation of the logic:  public string RemoveHtmlTags(string Html)         {             string content = Html;             char[] array = new char[content.Length];             int arrayIndex = 0;           ...
Post a Comment
Read more

Top 10 Best Video Editing Apps for Android

By
            Top 10 Best Video Editing Apps for Android                                                                                                                       Magisto Video Editor & Maker Magisto Video Editor  automatically  turns your photos and video clips into  magical  music videos that you’ll want to share with friends and family on Facebook, Instagram and more. Magisto Video Maker has over  80 million  happy users worldwide and was featured in  Google Play Editors’ Choice , Google's list of  Best Android Apps of 2015  and CES best app of the year! Express your creativity - make a movie an...
2 comments
Read more