| Server IP : 127.0.1.1 / Your IP : 216.73.216.83 Web Server : Apache/2.4.58 (Ubuntu) System : Linux nepub 6.8.0-88-generic #89-Ubuntu SMP PREEMPT_DYNAMIC Sat Oct 11 01:02:46 UTC 2025 x86_64 User : root ( 0) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/public_html/ |
Upload File : |
<!DOCTYPE html>
<html lang="en" class="source-sans-pro">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Pure Css dropdown menu</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
background: #33334d;
color: #222;
line-height: normal;
font-size: 16px;
font-family: sans-serif;
}
a, a:hover {
color: #33334d;
text-decoration: none;
font-weight: 600;
}
nav {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 50px;
background: #fff;
box-shadow: 0 0px 9px 4px rgba(0, 0, 0, 0.1), 0 -5px 2px 2px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 580px;
}
nav .logo {
position: relative;
float: left;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-size: 22px;
font-weight: 900;
text-transform: uppercase;
}
nav .logo span {
display: inline-block;
position: relative;
top: -8px;
font-size: 13pt;
}
nav .logo:hover {
background: #9494b8;
}
nav .links {
float: right;
margin-right: 30px;
position: relative;
}
nav .links li {
float: left;
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
nav .links li > a {
position: relative;
display: inline-block;
padding: 0 10px;
line-height: 30px;
height: 30px;
}
nav .links li > a:hover {
color: #fff;
background: #33334d;
border-radius: 2px;
}
nav .links li > a[class^=trigger-] {
padding-right: 40px;
}
nav .links li > a .arrow {
position: absolute;
width: 10px;
height: 10px;
top: 35%;
text-align: center;
right: 10px;
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3) transparent;
}
nav .links li > a .arrow:after {
content: "";
border-left: 1px solid rgba(0, 0, 0, 0.15);
top: -10px;
left: -15px;
position: absolute;
height: 15px;
}
nav .links li ul {
position: absolute;
left: 0;
margin: 0;
background: #fff;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
nav .links li ul > li {
clear: both;
list-style: none;
display: block;
padding: 0 10px;
margin: 0;
width: 100%;
}
nav .links li ul > li:hover {
background: #9494b8;
}
nav .links li ul > li:hover > a {
background: #9494b8;
color: #fff;
}
nav .links li:hover > .drop {
display: block;
animation: fadeInRight 0.3s ease;
-webkit-animation: fadeInRight 0.3s ease;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
</style>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<nav id="navigation">
<a href="#" class="logo">Studio<span>+<span></a>
<ul class="links">
<li><a href="#">About</a></li>
<li class="dropdown"><a href="#" class="trigger-drop">Work<i class="arrow"></i></a>
<ul class="drop">
<li><a href="#">Art</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Films</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="trigger-drop">Contact<i class="arrow"></i></a>
<ul class="drop">
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
</ul>
</li>
</ul>
</nav>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js"></script>
</body>
</html>