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

Labels:

Comments

Post a Comment

Popular posts from this blog

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

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

New Website Ideas to start a great Business online and earn money.

By
Internet is an all time business today. We know there is plenty of people with entrepreneurial passion waiting for the idea to finally start something meaningful. We also know there is a lot of people not satisfied with product options they have at the moment. So why not to try bring these two together? today in this post i came up with some the new unique ideas that can be implemented Today for a great start up. Here is list : 1. Help choosing career / work / occupation I think most of people have real problem while choosing career or life path. The site would help to make decision. In a nutshell - idea is that there will be two types of users - ones who seeks for advice and those who will help to make decision. In order to get career advice you will have to choose three activities which you love to do. Based on your chosen activities others will offer what possible career path you could choose. 2. Startup failures You can learn a lot from failures of others. W...
1 comment
Read more