<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
*,*::before,*::after{
box-sizing: border-box;
}
nav {
overflow: hidden;
background-color: rgb(2, 161, 127);
font-family: Arial, Helvetica, sans-serif;
}
nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .megaButton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
background-color: rgb(0, 63, 146);
}
.megaContent {
text-align: center;
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
z-index: 1;
}
.megaContent .megaHeader {
background: rgb(119, 6, 194);
padding: 16px;
color: white;
}
.dropdown:hover .megaContent {
display: block;
}
.megaColumn {
float: left;
width: 50%;
padding: 10px;
background-color: rgb(233, 255, 198);
height: 250px;
}
.megaColumn .links {
color: black;
padding: 16px;
margin:10px;
text-decoration: none;
display: block;
text-align: left;
border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
background-color: lightblue;
}
/*Float reset trick for clearing floats*/
.megaRow:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown">
<button class="megaButton">Projects >></button>
<div class="megaContent">
<div class="megaHeader">
<h2>Projects Menu</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>Commercial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
<div class="megaColumn">
<h3>Non-Commerial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
Create a mega menu with HTML and CSS (CSS-3)
Create a mega menu with HTML and CSS (CSS-3) helps you to Edit, Run and Share your Css Code directly from your browser. This development environment provides you version CSS-3.
How to give program Input?
The latest version of Coding Ground allows to provide program input at run time from the termnial window exactly the same way as you run your program at your own computer. So simply run a program and provide your program input (if any) from the terminal window available in the right side.
Keyboard Shortcuts
| Shortcut | Description |
|---|
| ⌘ + Enter | Run the program |
| ⌘ + S | Save Project (Login Required) |
| ⇧ + ⌘ + S | Save As Project |
| ⌘ + P | New Project |
| ⌘ + G | Share Project |
| ⌘ + Z | Undo Editing |
| ⌘ + Y | Redo Editing |
| ⌘ + A | Select All Text |
| ⌘ + X | Cut Selected Text |
| ⌘ + C | Copy Selected Text |
| ⌘ + V | Paste Copied Text |
| ⌘ + F | Search Text |
| ⌘ + ⌥ + F | Replace Text |
| Shortcut | Description |
|---|
| Ctrl + Enter | Run the program |
| Ctrl + S | Save Project |
| Shift + Ctrl + S | Save As Project |
| Ctrl + G | Share Project |
| Ctrl + Z | Undo Editing |
| Ctrl + Y | Redo Editing |
| Ctrl + A | Select All Text |
| Ctrl + X | Cut Selected Text |
| Ctrl + C | Copy Selected Text |
| Ctrl + V | Paste Copied Text |
| Ctrl + F | Search Text |
| Ctrl + H | Replace Text |
Save Css Project
You can save your Css Project with us so that you can access this project later on. To save a project you will need to create a login Id with us. So before you save a project, please create a login Id using a link given at the top right corner of this page.
Share Css Project
You can use this feature to share your Css Code with your teachers, classmates and colleagues. Just click Share Button and it will create a short link, which can be shared through Email, WhatsApp or even through Social Media. A shared link will be deleted if it has been passive for almost 3 months.
