CSS
Desk
ß
Reset
Reset the code to the default
Blueprint
Grid
Desk
White
Black
12 col
16 col
Change the background
Save
Save your changes to this link
Share
Create a permanent link for this code
Download
Download this code as a file
«
HTML
<div class="global-header"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Some Really, Really, Really Wide Link</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> <div class="global-header alt"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Some Really, Really, Really Wide Link</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div>
CSS
.global-header { border-radius: 10px; box-shadow: 0 1px 5px rgba(0, 0, 0, .8); font: 100%/1.4em Helvetica Neue, Arial, Helvetica, sans-serif; margin: 2em auto; overflow: hidden; width: 960px; } nav { background: pink; padding: 10px; float: left; width: 100%; } nav ul { float: left; left: 50%; list-style: none; margin: 0; padding: 0; position: relative; } nav ul li { float: left; left: -50%; margin: 5px; padding: 0; position: relative; } nav ul li a { background: red; color: white; display: block; padding: 10px; text-decoration: none; } nav ul li a:hover { background: blue; } .global-header.alt { width: 90%; }
