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

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

List Of Most Searched Topics On Google 2016

By
List Of Most Searched Topics On Google                                                                                                                               source Global Searches   1) Pokémon Go  2) iPhone 7   3) Donald Trump   4) Prince   5) Powerball   6) David Bowie   7) Deadpool   8) Olympics   9) Slither.io  1 0) Suicide Squad Global News   1) US Election  2) Olympics   3) Brexit   4) Orlando Shooting  5) Zika Virus   6) Panama Papers  7) Nice 8) Brussels  9) Dallas Shooting  10)...
Post a Comment
Read more

15 BEST PHOTO EDITING APPS FOR ANDROID

By
There are various photo editing apps available on play store.But there are few apps that can make the most unflattering of images into pieces of art in a matter of few taps.From Amazing Photo Effects to Clicking Best                       Selfies,These Apps are Worth a Shot. 1. Adobe Photoshop Lightroom Bring Beautiful Images into light with adobe lightroom.powered by the magic ofadobe photoshop technology,lightroom for mobile enables you to craft and share professional quality images from smartphone to reality. Adobe has vastly improved their mobile offerings over the last year with Lightroom and Photoshop Express leading the charge in the photo editing apps department.Winner of 2015 Professional photographer hot one awards in the photo category app. They’re both more powerful than average and they both also sync to the desktop variants as long as you use the Adobe Creative Cloud. Individually, Lightroom can be u...
Post a Comment
Read more