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>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="wrapper">
        <div id="top_nav">
            <ul class="clearfix">
                <li><a href="#" class="hover">home</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">production</a></li>
                <li><a href="#">Our Goals</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">More Blogs</a></li>
                <li><a href="#">Updates</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!--Блок Ñ Ð²ÐµÑ€Ñ…Ð½ÐµÐ¹ навигацией-->
</div>
</body>
</html>
 
ul {
    list-style-type:none;
    }
    
body {
    background:#c0c0c0;
    font-family:"Trebuchet MS", Tahoma, sans-serif;
    font-size:14px;
    color:#929292;
    }
    
#wrapper {
    width:1000px;
    background:#434343;
    height:1000px;
    margin:0 auto;
    }
    
#top_nav {
    padding-bottom:10px;
    background-color:#8a2400;
    }
    
#top_nav ul{
    background:#ccc;
    border-top:1px solid #000;
    border-bottom:1px dotted #8a2400;
    }
    
#top_nav li {
    float:left;
    }
​
#top_nav li:first-child {
    margin-left:43px;
    }
    
    
#top_nav a {
    display:block;
    font-weight:bold;
    font-size:10px;
    color:#8d8769;
    text-transform:uppercase;
    padding:10px 18px;
    text-decoration:none;
    position: relative;
    }
    
#top_nav a.hover {
    color:#fff;
    background:#ca2a04;
    }
    
#top_nav a:hover {
    position: relative;
    top: 1px; /*перекрываем бордер у ul*/
    margin-top: -1px; /*маÑкируем образовавшиеÑÑ Ð¾Ñ‚Ñтуп*/
    padding-bottom: 11px;
    color:#fff;
    background:#ca2a04;
    }
​
/* у UL заменÑет ÑвойÑтво overflow: hidden приÑваиванием клаÑÑа .clearfix */
.clearfix {
    display: table;
}
.clearfix:after {
    content: '1 1';
    font: .1px/0 a;
    display: block;
    word-spacing: 99in;
}
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers