Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class="menu">
        <li><a href="#1">Курсы</a></li>
        <li class="active"><a href="#1">Демонстрации</a></li>
        <li><a href="#1">Участники</a></li>
        <li><a href="#1">Достижения</a></li>
        <li><a href="#1">Профиль</a></li>
        </ul>
        
    </body>
</html>
 
html, body {
    margin: 0;
    padding: 0;
}
body {
    width: 280px;
    min-height: 280px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}
.menu{
    margin:0px;
    padding:0px;
    list-style:none;
    
}
ul{
    width:200px;
    
    
}
.menu a{
    display:block;
    color:white;
    text-decoration:none;
    padding:10px 15px;
    
     
    
}
.menu li{
 background:#2980B9;
border-bottom: 2px solid #2C3E50;
     
}
li.active {
    background-color:#1ABC9C; 
    border-bottom: 2px solid #2ECC71;
}
.menu li>a:hover{
    background-color:#1ABC92;
    
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers