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

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

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