Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a split button dropdown with CSS?
Under the menu section of a web page, you must have seen dropdowns. On keeping the mouse cursor on a dropdown menu button, the sub menus are visible. Such split buttons appear to be in a different section within the same button. This can be represented by arrow keys or a bottom arrow. Let us see how to create such menus with HTML and CSS.
Create a dropdown menu button
Use the <button> element to create a button for the dropdown menu −
<button>Button</button>
Style the button like this −
button {
background-color: rgb(18, 5, 95);
color: white;
padding: 16px;
font-size: 20px;
font-weight: bolder;
font-family: monospace, sans-serif;
border: none;
outline: none;
}
Create the split button
Use the arrow keys to represent the dropdown menu with menu links. We have set a div container −
<div class="dropMenu">
<button>>></button>
<div class="dropContent">
<a href="#">First Link</a>
<a href="#">Second Link</a>
<a href="#">Third Link</a>
</div>
</div>
Position the drop menu
The position property with the value absolute is used to position the dropdown menu. The displa property is set to inline-block for the menus −
.dropMenu {
position: absolute;
display: inline-block;
}
.dropMenu button {
border-left: 1px solid #0d8bf2;
}
Position the drop content
The links in the dropdown i.e., the menu links are positioned absolute. The dropdown content i.e. the menu links is invisible be default i.e. display is to none. These only appear when the mouse cursor is placed −
.dropContent {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 1;
}
.dropContent a {
color: black;
background-color: rgb(184, 253, 255);
font-size: 18px;
font-weight: bold;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Dropdown menu appears on hover
On hover the dropdown menu links appear. For this, the :hover selector is used −
.dropContent a:hover {
background-color: rgb(48, 0, 110);
color: white;
}
.dropMenu:hover .dropContent {
display: block;
}
Example
The following is the code to create split button dropdown with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
button {
background-color: rgb(18, 5, 95);
color: white;
padding: 16px;
font-size: 20px;
font-weight: bolder;
font-family: monospace, sans-serif;
border: none;
outline: none;
}
.dropMenu {
position: absolute;
display: inline-block;
}
.dropMenu button {
border-left: 1px solid #0d8bf2;
}
.dropContent {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 1;
}
.dropContent a {
color: black;
background-color: rgb(184, 253, 255);
font-size: 18px;
font-weight: bold;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropContent a:hover {
background-color: rgb(48, 0, 110);
color: white;
}
.dropMenu:hover .dropContent {
display: block;
}
.btn:hover,
.dropMenu:hover .btn {
background-color: #0b7dda;
}
</style>
</head>
<body>
<h1>Split Button dropMenu Example</h1>
<button>Button</button>
<div class="dropMenu">
<button>
>>
</button>
<div class="dropContent">
<a href="#">First Link</a>
<a href="#">Second Link</a>
<a href="#">Third Link</a>
</div>
</div>
<h1>Hover over '>>' to open dropMenu menu</h1>
</body>
</html>
614 Views
