Execute
Save
Share
Share link
share
share
share
Team
Public Teams
Comments
0
Created By:
Guest
Title:
Title
Description
Edit
Copy Link
Login
Email *
Password *
Login
OR
Create Account
Screen Name *
Email *
Password *
Retype Password *
Team Access Code
Register
Public CodeBins
HELP
--Select Theme--
Ambiance
Blackboard
Cobalt
Eclipse
Elegant
Erlang-Dark
Lesser-Dark
Monokai
Neat
Night
Rubyblue
Vibrant-Ink
Xq-Dark
New CodeBin
CodeBins Versions
09/21/2020- V.1
Recent CodeBins
View All CodeBins
Bottom of Page
In Head
On Load
On Ready
Setting
Validate
Copy
Format
li { display: block; transition-duration: 0.5s; } li:hover { cursor: pointer; } ul li ul { visibility: hidden; opacity: 0; position: center; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; color: red; padding: 0; } ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } li:focus-within a { outline: none; } *{ font-family: Helvetica, sans-serif; } header{ top: 0; position: fixed; width: 100%; animation: 1s ease-out 0s 1 slideInLeft; background: #666; background-image: linear-gradient(to bottom right, darkblue, black); } body{ margin: 0; padding: 0; } .underlineEffects ul { margin: 0 auto; padding: 0; list-style: none; display: table; text-align: center; } .underlineEffects li { float: left; position: relative; padding: 15px 0; } .underlineEffects a { color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; position: relative; } .underlineEffects a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } .underlineEffects a:hover:after { width: 100%; left: 0; } .actief{ padding: 15px 0; color: #fff; line-height: 90%; text-transform: uppercase; border-bottom: 2px solid; text-decoration-style: solid; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; position: relative; font-weight: bold; }
Setting
Validate
Copy
Format
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Document </title> </head> <body> <header> <nav role="navigation"> <div class="underlineEffects"> <ul> <li> <a href="#"> One </a> </li> <li> <a href="#"> Two </a> <ul class="dropdown"> <li> <a href="#"> Sub-1 </a> </li> <li> <a href="#"> Sub-2 </a> </li> <li> <a href="#"> Sub-3 </a> </li> </ul> </li> <li> <a href="#"> Three </a> </li> </ul> </div> </nav> </header> </body> </html>
No Doc Type
HTML5
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.1
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
Copy
Format
Download
×
Code Description
×
Difference of Versions
HTML
CSS
JS
×
JS Error
×
CSS Error
Errors
Warnings
×
JavaScript Setting
JS Libraries:
Chrome Frame 1.0.3
Dojo 1.8.0
Dojo 1.7.3
Dojo 1.7.2
Ext Core 3.1.0
jQuery 1.8.0
jQuery 1.7.2
jQuery 1.6.0
jQuery 1.5.0
jQuery 1.4.4
jQuery 1.4.0
jQuery-min 1.7.2
jQueryUI-min 1.8.21
MooTools more-1.4.0.1-full
MooTools core-1.4.5-full
MooTools core-1.4.1-full
Prototype 1.7.1.0
script.aculo.us 1.9.0
SWFObject 2.2
Twitter Bootstrap 2.0.4
WebFont Loader 1.0.28
yui 3.5.1
User Libraries:
Upload File
JavaScript URL(s):
×
CSS Setting
CSS Libraries:
jQueryUI 1.8.21
Twitter Bootstrap 2.0.4
User Libraries:
Upload File
CSS URL(s):