<header role="banner">
	<nav role="navigation">
		<ul>
			<li>
				<a href="/">
					<div>
						Home
						<span>there's no place like it</span>
					</div>
				</a>
			</li>
			<li>
				<a href="/blog">
					<div>
						Blog
						<span>my thoughts rock</span>
					</div>
				</a>
				<div>
					<ul>
						<li><a href="#">Me</a></li>
						<li><a href="#">Gaming</a></li>
						<li><a href="#">Sport</a></li>
						<li><a href="#">Web Design</a></li>
						<li><a href="#">Web Development</a></li>
					</ul>
				</div>
			</li>
			<li>
				<a href="/contact">
					<div>
						Contact
						<span>drop me a line</span>
					</div>
				</a>
			</li>
			<li>
				<a href="/forum">
					<div>
						Forum
						<span>chat with others</span>
					</div>
				</a>
			</li>
			<li>
				<a href="#/#">
					<div>
CSS 3 Dropdown Menu
						<span>So can you make dropmenu</span>
					</div>
				</a>
			</li>    
		</ul>
	</nav>
</header>
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block;	}
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
	
/*GENERIC STYLES*/
body { background: #f2f2f2;color: #222;-webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
/*NAV*/
	header {
		background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
		border-bottom: 1px solid rgba(0,0,0,.1);
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
		display: block;
		position: fixed;
		width: 100%;
		z-index: 1000;
	}
	
	header > nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		header > nav > ul > li {
			flex: 0 1 auto;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all linear 0.1s;	
		}
		
			header > nav > ul > li:hover {
				background: rgba(58,162,173,1);
			}
			
			header > nav > ul > li a + div {
				background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);
				border-radius: 0 0 2px 2px;
				box-shadow: 0 3px 1px rgba(0,0,0,.05);
				display: none;
				font-size: 1rem;
				position: absolute;
				width: 195px;
			}
			
				header > nav > ul > li:hover a + div {
					display: block;
				}
				
				header > nav > ul > li a + div > ul {
					list-style-type: none;	
				}
				
					header > nav > ul > li a + div > ul > li {
						margin: 0;
						padding: 0;
					}
					
						header > nav > ul > li a + div > ul > li > a {
							color: rgba(255,255,255,.9);
							display: block;	
							font-size: .75rem;
							letter-spacing: 1.5px;
							padding: .25rem 1.5rem;
							text-decoration: none;
							text-transform: uppercase;
						}
						
							header > nav > ul > li a + div > ul > li:hover > a {
								background-color: rgba(0,0,0,.15);	
							}
	
			header > nav > ul > li > a {
				align-items: flex-start;
				color: #fff;
				display: flex;
				font-size: 1.55rem;
				font-weight: 200;
				letter-spacing: 1px;
				max-width: 130px;
				padding: 1rem 1.5rem;
				text-decoration: none;
				text-shadow: 0 1px 1px rgba(0,0,0,.1);
				transition: all linear 0.1s;
			}
			
				header > nav > ul > li > a > div > span {
					color: rgba(255,255,255,.75);
					display: block;
					font-family: Georgia, "Times New Roman", Times, serif;
					font-size: .7rem;	
					font-style: italic;
					line-height: 1rem;
					max-width: 260px;
				}

@media (min-width: 990px) {
  header > nav > ul > li > a {
    max-width: 500px;
    font-size: 1.7rem;
	line-height: 2rem;
  }
  
  header > nav > ul > li > a > div > span {
	  margin: 4px 0 0;  
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.