Dropdowns in CSS3

Dropdowns are basically used to show links in a list on click or hover.There is example of hoverable dropdown menu with source code is explained below.

Drowpdown example

<style type="text/css">
.c33-ul { margin: 0; padding: 0; overflow: auto; list-style-type: none; background: linear-gradient(to right, #61ba6d, #83c331); }
.c33-li { float: left; }
.c33-li a, .c33-course { display: inline-block; color: white; text-align: center; padding: 15px 17px 15px 17px; text-decoration: none; }
.c33-li a:hover, .c33-dropdown:hover .c33-course { background-color: grey; }
.c33-li .c33-dropdown { display: inline-block; }
.c33-courses-menu { display: none; position: absolute; background-color: #f2f2f2; min-width: 155px; box-shadow: 0px 9px 17px 0px rgba(0,0,0,0.3); z-index: 1; }
.c33-courses-menu a { color: black; padding: 13px 17px; text-decoration: none; display: block; text-align: left; }
.c33-courses-menu a:hover { background-color: lightgrey; }
.c33-dropdown:hover .c33-courses-menu { display: block; }
.active {
background-color: green; } </style>
<ul class="c33-ul"> <li class="c33-li active"><a href="#">Home</a></li> <li class="c33-li"><a href="#">About</a></li> <li class="c33-li c33-dropdown"> <a href="#" class="c33-course">Courses</a> <div class="c33-courses-menu"> <a href="#">Course 1</a> <a href="#">Course 2</a> <a href="#">Course 3</a> </div> </li> </ul>

Output of above code

Explaination of example

First of all here an unordered list is used ul and some styling properties are applied on it like margin, padding, overflow and background properties to avoid some default actions.After it float property is applied on li element to float toward left.After it styling is applied on all the link elements are which were display, color, text-align, padding and text-decoration. These properties are used to make links responsive.After it hover property is is used to specify the colors on hover effect to links and also dropdown button. After it hover property is also applied on drowpdown button to show the targeted content when user hover on it.

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.