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-Operators

By
An operator is a symbol that operates on a certain data types and produce the output as the result of the operation. Category of Operators • Unary Operator An unary operator is an operator which operates on one operand that is it operates on itself.            Operand1 operator Here Operand1 may be a variable , a constant or an expression etc.    For example: -b , ~a , x+1 etc. • Binary Operator A binary operator is an operator which operates on two operands. Operand1 operator Operand2 Here Operand1 and Operand2 maybe a variable, a constant or an expression etc. and Operator must be either arithmetic type or relational type or logical type etc.    For example: a+b , a && b , etc. • Ternary Operator A ternary operator is an operator which operates on 3 operands. Operand1 o perator Operand2 operator Operand3   Here Operand1 , Operand 2 , Operand3 may be a variable ...
Post a Comment
Read more

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

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