Css Dropdown Design

Developer
Parth Viroja
Size
2,096 Kb
Views
38,456
  1. Css Dropdown Design Previews
  2. Css Dropdown Design HTML Codes
  3. Css Dropdown Design CSS Codes

How do I make an css dropdown design?

What is a css dropdown design? How do you make a css dropdown design? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Css Dropdown Design Previews
IQ Test

Css Dropdown Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css Dropdown Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Dropdown Menu </h1>
<div class="select-div" style="margin-top:100px;"> <label class="selected">India</label> <ul class="top"> <li>Mainland China 简体中文</li> <li>Hong Kong 繁體中文</li> <li>Taiwan 繁體中文</li> <li>Global Home</li> </ul>
</div>
<div class="select-div"> <label class="selected">India</label> <ul class="bottom"> <li>Mainland China 简体中文</li> <li>Hong Kong 繁體中文</li> <li>Taiwan 繁體中文</li> <li>Global Home</li> </ul>
</div>
</body>
</html>

Css Dropdown Design - Script Codes CSS Codes

* { padding: 0px; margin: 0px; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; overflow: hidden; overflow-y: auto; padding: 10px;
}
h1 { font-size: 3em; font-weight: lighter; color: #ff4a00; text-align: center; display: block; padding: 20px 0px;
}
.select-div { display: block; margin: 20px auto; width: 200px; height: 40px; position: relative; vertical-align: middle; font-size: 12px; line-height: 38px; color: #333;
}
.select-div > .selected { position: absolute; display: inline-block; width: 200px; height: 38px; background-repeat: no-repeat; background-position: 92% 50%; background-image: url("//global.mifile.cn/webfile/globalimg/sg/2014/main/newindex/sg_10.png"); cursor: pointer; z-index: 0; padding-left: 12px; border: 1px solid #dfdfdf; background-color: #fff;
}
.select-div > ul { display: block; width: 200px; background-color: #fff; border: 1px solid #dfdfdf; position: absolute; list-style-type: none; right: 0; z-index: 2; left: 0; display: none;
}
.select-div > ul.bottom { top: 36px; border-top: 0;
}
.select-div > ul.top { bottom: 36px; border-bottom: 0;
}
.select-div > ul > li { padding-left: 12px;
}
.select-div > ul > li:hover { color: #ff4a00;
}
.select-div:hover > ul { display: block;
}
Css Dropdown Design - Script Codes
Css Dropdown Design - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,096 Kb
Views 38,456
Do you need developer help for Css Dropdown Design?

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!

Parth Viroja (parthviroja) Script Codes
Name
Filter, sort grid item
Responsive Card Design
Ripple Effect
Jquery Tree with checkbox
Text Shapes
Remove Class On Click Outside
Jquery Tab
Rotate Circle Pure Javascript
Dynamic Radial Menu Using Javascript
3D-box
Create amazing Facebook ads 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!