Simple PureCss dropdown menu with following subnav

Developer
Robert Borghesi
Size
2,966 Kb
Views
36,432
  1. Simple PureCss dropdown menu with following subnav Previews
  2. Simple PureCss dropdown menu with following subnav HTML Codes
  3. Simple PureCss dropdown menu with following subnav CSS Codes

How do I make an simple purecss dropdown menu with following subnav?

Menu with dropdown made only in css, with a line that follow the hover on the line. What is a simple purecss dropdown menu with following subnav? How do you make a simple purecss dropdown menu with following subnav? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Simple PureCss dropdown menu with following subnav Previews
IQ Test

Simple PureCss dropdown menu with following subnav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple PureCss dropdown menu with following subnav</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- not responsive yet -->
<nav> <ul id="main"> <li>Home</li> <li>About</li> <li>Skills <ul class="drop"> <div> <li>scss</li> <li>jquery</li> <li>html</li> </div> </ul> </li> <li>Contact</li> <div id="marker"></div> </ul>
</nav>
</body>
</html>

Simple PureCss dropdown menu with following subnav - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; background: #374954; color: white; text-align: center;
}
#main { position: relative; list-style: none; background: #6BBE92; font-weight: 400; font-size: 0; text-transform: uppercase; display: inline-block; padding: 0; margin: 50px auto;
}
#main li { font-size: 0.8rem; display: inline-block; position: relative; padding: 15px 20px; cursor: pointer; z-index: 5; min-width: 120px;
}
li { margin: 0;
}
.drop { overflow: hidden; list-style: none; position: absolute; padding: 0; width: 100%; left: 0; top: 48px;
}
.drop div { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-transition: all 0.5s 0.1s; -moz-transition: all 0.5s 0.1s; -ms-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; position: relative;
}
.drop li { display: block; padding: 0; width: 100%; background: #3E8760 !important;
}
#marker { height: 6px; background: #3E8760 !important; position: absolute; bottom: 0; width: 120px; z-index: 2; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; transition: all 0.35s;
}
#main li:nth-child(1):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker { -webkit-transform: translate(0px, 0); -moz-transform: translate(0px, 0); -ms-transform: translate(0px, 0); transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker { -webkit-transform: translate(120px, 0); -moz-transform: translate(120px, 0); -ms-transform: translate(120px, 0); transform: translate(120px, 0);
}
#main li:nth-child(3):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker { -webkit-transform: translate(240px, 0); -moz-transform: translate(240px, 0); -ms-transform: translate(240px, 0); transform: translate(240px, 0);
}
#main li:nth-child(4):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker { -webkit-transform: translate(360px, 0); -moz-transform: translate(360px, 0); -ms-transform: translate(360px, 0); transform: translate(360px, 0);
}
Simple PureCss dropdown menu with following subnav - Script Codes
Simple PureCss dropdown menu with following subnav - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4.5
Size 2,966 Kb
Views 36,432
Do you need developer help for Simple PureCss dropdown menu with following subnav?

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!

Robert Borghesi (dghez) Script Codes
Name
Css Rotating 3d cubes different speed
Pure custom css animation on new google logo
Text-mask background moving on MouseMove - v2
Continuous scrolling background of sticky header
Envato Remix Contest Challenge
SlamDunk Parallax on MouseMove
Sorting with morphing content
Easy parallax header
Opening animation from circular avatar
Best 3 players on fifa 14 - HOVER THEM
Create amazing blog posts 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!