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>
    <style type="text/css">
*{
        padding:0;
        margin:0;
}
#navigation{
    list-style: none;
    color: white;
    font-family: Franklin Gothic Medium;
    font-size:14px;
}
#navigation li {
    float:left;
    position:relative;
}
#navigation li a{
    text-decoration:none;
    color: white;
    display:block;
    font-family: Franklin Gothic Medium;
    font-size:14px;
    padding: 10px;
    background: #333333;
}
#navigation li a:hover{
    color:#000;
    background:#FFF;
}
#navigation ul{ 
    display:none;
    width:600px;
}
  
#navigation ul a{
    white-space: nowrap;
    display:block;
}
#navigation ul li{
    float:left;
}
#navigation li:hover ul{
    top: 28px;
    left:0;
    display:block;
    position:absolute;
}
#navigation li:hover a{
    background: #FFF;
    color: #000;
    border: none;
}
​
</style>
<body>
<div style="height: 300px; width: 100%; background-color: #DDD;">
<ul id="navigation" >
<li><a href="#">ГЛАВНАЯ</a>
<ul>
<li><a href="#">О КОМПАНИИ</a></li>
<li ><a href="#">О ПРОДУКЦИИ</a></li>
<li ><a href="#">О ЖИЗНИ</a></li>
</ul>
</li>
<li><a href="#">УСЛУГИ</a></li>
<li><a href="#">ПРАЙС-ЛИСТ</a></li>
<li><a href="#">ПОЧЕМУ МЫ</a></li>
<li><a href="#">ПРЕСС-ЦЕНТР</a></li>
<li><a href="#">PRO BONO</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</body>
</html>
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers