Create dropdown menu using css & css3

Create dropdown menu using css & css3

This article we are creating create dropdown menu using css & css3. We have been using HTML, CSS & CSS3. How we have inserted HTML, CSS into our file. In this dropdown you can change according to your beautiful design. We can easily to modify. This is a very useful module for all web player. Just copy and paste this simple code & ready your dropdown menu.

We have 6 type of beautiful drop down menu you can choose according to your requirement.

By using this plugin the design will look like this.

First of all you put Html in your file.

<div class="parts"> <h2>Simple Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 1</a> <ul class="my-dropdown1"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Up Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 2</a> <ul class="my-dropdown1 animatedup-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Down Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 3</a> <ul class="my-dropdown1 animatedown-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Left Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 4</a> <ul class="my-dropdown1 animateleft-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Right Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 5</a> <ul class="my-dropdown1 animateright-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated FadeIn Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 6</a> <ul class="my-dropdown1 animatesd-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div>

Then put Css in your file.

  


Some css put in your css file.

*{
    margin:0;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body {
    border: 20px solid #f4f4f4;
    padding: 20px;
    font-family: cursive;
}
h2 {
    margin-bottom: 15px;
}
.parts {
    float: left;
    width: 50%;
    clear: right;
    border: 1px solid #ececec;
    padding: 30px;
}


/*====== Common css dropdown =========*/
.dropdown-here {
    position: relative;
}
.dropdown-here > a {
    color: #fff;
    font-size: 18px;
    background: #5cdb94;
    padding: 10px 38px 10px 22px;
    display: inline-block;
    position: relative;
}
.dropdown-here > a::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    position: absolute;
    top: 21px;
    transition: all 0.5s;
    right: 16px;
}
.my-dropdown1 li a {
    padding: 3px 15px;
    display: inline-block;
    width: 100%;
    transition: all 0.5s;
}
.my-dropdown1 li a:hover{
    padding-left: 17px;
}
.my-dropdown1::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid white;
    position: absolute;
    top: -8px;
    left: 15px;
}
/*====== Common css dropdown =========*/


/*====== drop down 1 =========*/
.my-dropdown1 {
    position: absolute;
    left: 0;
    min-width: 168px;
    background: #fff;
    box-shadow: 0px 0px 3px 0px #ccc;
    transition: all 0.5s;
    padding: 6px 0 10px;
    display: none;
}
.dropdown-here:hover .my-dropdown1 {
    display: block;
}
/*====== drop down 1 =========*/


/*====== drop down 2 =========*/
.animatedup-dw {
    display: block;
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedup-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 2 =========*/


/*====== drop down 3 =========*/
.animatedown-dw {
    display: block;
    margin-top: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedown-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 3 =========*/


/*====== drop down 4 =========*/
.animateleft-dw {
    display: block;
    left: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateleft-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 4 =========*/


/*====== drop down 5 =========*/
.animateright-dw {
    display: block;
    left: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateright-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 5 =========*/


/*====== drop down 6 =========*/
.animatesd-dw {
    display: block;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatesd-dw{
    visibility: visible;
    opacity: 1;
}
/*====== drop down 6 =========*/

Finally we are completed different type of drop down menu. First of all I want to tell you this, If you want to use more than drop down menu you can do easily first you will have to copy code & paste your HTML file. Likewise you can use more than more drop down in your beautiful page.

We have given the best suitable and easiest way for create dropdown menu using css & css3.

Thanks for reading this article. We have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this, you simply visit our site’s post and pages. Collection of amazing designing, development tricks and tips. Hope you like create dropdown menu using css & css3 for any query & suggestion please comment.

We have furthermore more beautiful jQuery module you can visit easily.

https://www.papawebdesigner.com/category/jquery/

#slider #owl-carousel #logoslider #brandslider #jqueryslider



3 thoughts on “Create dropdown menu using css & css3

  1. Contact Form says:

    Ciao! papawebdesigner.com

    We present oneself

    Sending your message through the Contact us form which can be found on the sites in the contact partition. Feedback forms are filled in by our application and the captcha is solved. The superiority of this method is that messages sent through feedback forms are whitelisted. This method increases the probability that your message will be open.

    Our database contains more than 25 million sites around the world to which we can send your message.

    The cost of one million messages 49 USD

    FREE TEST mailing of 50,000 messages to any country of your choice.

    This message is automatically generated to use our contacts for communication.

    Contact us.
    Telegram – @FeedbackFormEU
    Skype FeedbackForm2019
    Email – FeedbackForm@make-success.com

    Reply
  2. oprol evorter says:

    Perfect piece of work you have done, this site is really cool with superb information.

    Reply
    1. papawebdesigner says:

      Thanks dear,

      You can visit my whole website. It is very useful.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *