Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
/*reset*/
​
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
​
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
​
​
​
#site {
    margin: 0 auto;
    position: relative;
    width: 960px;
}
​
  #layer-base {
    background:  url("") no-repeat scroll 320px 0 #061E3E;
    color: #FFFFFF;
    margin-left: -100%;
    padding-left: 960px;
    position: relative;
    width: 100%;
    z-index: 1;
    margin-top: -10px;
}
 
 #layer-top {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
}
  #layer-top .container {
    background: none repeat scroll 0 0 #FFFFFF;
    -moz-box-shadow: 0 0 10px #000000;
    float: right;
    margin-right: -760px;
    position: relative;
    width: 960px;
    z-index: 2;
}
  .nav-main {
    float: left;
    height: auto;
    margin: 76px 0 7px;
    overflow: visible;
    padding: 0;
    width: 200px;
}
​
  .nav-main > li {
    margin-bottom: 1px;
    position: relative;
}
  .nav-main li a.parent {
    background-color: #2175BF;
    color: #FFFFFF;
    display: block;
    font-size: 13px;
    padding: 10px 0 10px 15px;
    position: relative;
}
element.style {
    height: 730px;
}
#layer-top .exposed {
    float: left;
    width: 200px;
}
ol, ul {
    list-style: none outside none;
}
body {
    font-family: arial,helvetica,sans-serif;
    font-size: 12px;
}
.btn-open-close {
    background: url("") no-repeat scroll 0 0 transparent;
    left: -30px;
    padding-top: 70px;
    position: absolute;
    top: 423px;
    width: 178px;
}
.btn {
    height: 0;
    overflow: hidden;
}
ul#nav-footer {
    float: left;
    margin: 250px 0 0 15px;
}
ul#nav-footer li {
    border-bottom: 1px solid #E5EBEE;
    font-size: 11px;
    list-style-type: none;
    margin: 0;
    padding: 0.4em 0;
    width: 350px;
}
ul#nav-footer li a {
    color: #3393E7;
}
ul#nav-footer li.last
{
    margin: 80px 0 0 0;
}
</style>
</head>
<body>
<div id="site">
  <div id="layer-base" style="height: 741px;"></div>
  <div id="layer-top" style="height: 741px;">
    <div class="container clearfix">
        <div class="exposed clearfix" style="height: 741px">
            <a href=""><img alt="" class="btn btn-open-close" src="http://www.mckinsey.com/images/Dotcom/home/btn-open-close.png"></a>        
            <ul id="nav" class="nav-main" name="nav">
                <li><a class="parent">Company</a></li>
                <li><a class="parent">Solutions</a></li>
                <li><a class="parent">Performance</a></li>
                <li><a class="parent">News</a></li>
                <li><a class="parent">Careers</a></li>
            </ul>
            <ul id="nav-footer">
                <li><a>Contact Us</a></li>
                <li><a>Site Map</a></li>
                
            </ul>
        </div>
    </div>
  </div>
 </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers