CSS dropdowns

Developer
Brian
Size
3,146 Kb
Views
10,120
  1. CSS dropdowns Previews
  2. CSS dropdowns HTML Codes
  3. CSS dropdowns CSS Codes

How do I make an css dropdowns?

This is a CSS solution for hoverable drop-down boxes. Copy / content is hidden until the icon is hovered. Should work up to IE7, but the transitions will break in IE8 (functionality will remain though). . What is a css dropdowns? How do you make a css dropdowns? This script and codes were developed by Brian on 22 November 2022, Tuesday.

CSS dropdowns Previews
IQ Test

CSS dropdowns - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS dropdowns</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div class="dropdown-box box-1"> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, temporibus tempore eaque modi ipsa dicta alias inventore voluptate consectetur dolor. </p> <a href="#">cta here</a> </div> </div> <div class="dropdown-box icon-right box-2"> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, temporibus tempore eaque modi ipsa dicta alias inventore voluptate consectetur dolor. </p> <a href="#">cta here</a> </div> </div>
</main>
</body>
</html>

CSS dropdowns - Script Codes CSS Codes

main { width: 400px; height: 300px; position: relative; font-family: arial, helvetica, sans-serif; background: lightblue; background: url('http://placebear.com/g/400/300') no-repeat; border: 2px solid gray; margin: 20px auto;
}
.dropdown-box { position: absolute; padding: 0 20px; border: 0 solid transparent; border-radius: 5px; background: #fff; background: rgba(255, 255, 255, 0.8); -webkit-transition: padding .3s; transition: padding .3s;
}
.dropdown-box a { text-transform: uppercase; display: block; margin-top: 5px; font-weight: 800; color: #666;
}
.dropdown-box:after { content: "+"; position: absolute; top: -15px; left: -15px; font-family: arial, helvetica, sans-serif; font-size: 2.4em; font-weight: 800; color: #c7c8ca; background: #fff; border: 1px solid #c7c8ca; border-radius: 50%; padding: 1px 8px; -webkit-transition: .3s; transition: .3s;
}
.dropdown-box .content { width: 150px; height: 0; position: relative; overflow: hidden; -webkit-transition: .3s; transition: .3s;
}
.dropdown-box .content a:hover { color: #000;
}
.dropdown-box:hover { padding: 20px; border: 1px solid #c7c8ca; margin: -1px 0 0 -1px; z-index: 100;
}
.dropdown-box:hover:after { color: #666;
}
.dropdown-box:hover .content { height: 150px;
}
.icon-right::after { left: 165px;
}
.box-1 { top: 120px; left: 100px;
}
.box-2 { top: 50px; left: 190px;
}
CSS dropdowns - Script Codes
CSS dropdowns - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 3,146 Kb
Views 10,120
Do you need developer help for CSS dropdowns?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian (brian-baum) Script Codes
Name
ReactJS Image Carousel
JQuery exercise
Smooth Scrolling in ReactJS
Responsive demo page
ReactJS Accessible Accordion Panel
JQuery countdown plugin
AngularJS contact list
JQuery hash nav plugin
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!