Pure CSS dropdown navigation

Developer
Sander
Size
2,355 Kb
Views
8,096
  1. Pure CSS dropdown navigation Previews
  2. Pure CSS dropdown navigation HTML Codes
  3. Pure CSS dropdown navigation CSS Codes

How do I make an pure css dropdown navigation?

A simple dropdown navigation, created with only CSS, no Javascript needed.. What is a pure css dropdown navigation? How do you make a pure css dropdown navigation? This script and codes were developed by Sander on 18 December 2022, Sunday.

Pure CSS dropdown navigation Previews
IQ Test

Pure CSS dropdown navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS dropdown navigation</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> <div class="wrapper"> <div class="top"> </div> <ul class="navigation"> <li><a href="" title="Home">Home</a></li> <li><a href="" title="About us">About us</a></li> <li><a href="" title="Portfolio">Portfolio</a> <ul> <li><a href="" title="Websites">Websites</a></li> <li><a href="" title="Webshops">Webshops</a></li> <li><a href="" title="SEO">SEO</a></li> <li><a href="" title="Responsive webdesign">Responsive webdesign</a></li> </ul> </li> <li><a href="" title="Contact">Contact</a></li> <div class="clear"></div> </ul> <div class="footer"> <h1 class="pageTitle">Dropdown navigation</h1> <p>A beautifull but simple dropdown navigation. Realized with only CSS, no Javascript needed. Great fallback for users who disabled Javascript.</p> </div>
</div>
</body>
</html>

Pure CSS dropdown navigation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,100,500,700,600,800,900);
body { background: #d4d4d4; font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 14px; line-height: 26px; color: #666;
}
.clear { clear: both;
}
.wrapper { width: 620px; margin: 20px auto; border-radius: 10px; border: solid 3px #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}
.top { min-height: 100px; background: #ED6B16; border-radius: 10px 10px 0 0;
}
.footer { min-height: 200px; padding: 20px; background: #e4e4e4; border-radius: 0 0 10px 10px;
}
.pageTitle { font-size: 24px; line-height: 40px; font-weight: 700; color: #000;
}
.navigation { list-style: none; padding: 0; margin: 0; background: rgb(58,58,58); border-top: solid 3px #fff; border-bottom: solid 3px #fff; /* box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 1); */
}
.navigation li { float: left;
}
.navigation li:hover { background: #222;
}
.navigation li:first-child { -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 0 0 5px;
}
.navigation li a { display: block; padding: 0 20px; text-decoration: none; line-height: 40px; color: #fff;
}
.navigation ul { display: none; position: absolute; list-style: none; margin-left: -3px; padding: 0; overflow: hidden;
}
.navigation ul li { float: none;
}
.navigation li:hover > ul { display: block; background: #222; border: solid 3px #fff; border-top: 0; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
}
.navigation li:hover > ul li:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
}
.navigation li li a:hover { background: #000;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
}
Pure CSS dropdown navigation - Script Codes
Pure CSS dropdown navigation - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 4
Size 2,355 Kb
Views 8,096
Do you need developer help for Pure CSS dropdown navigation?

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!

Sander (skeurentjes) Script Codes
Name
Accordion
Animates search input with only css
Sticky widget
Flexbox table
Sidenavigation
Image gallery with caption
Flexbox layout
Parallax scrolling background
3D box
Search field
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!