cyb3rD/Horizontal menu example.markdown

## Horizontal menu example.markdown

      
    Raw
  

              Horizontal menu example.markdown
            
          
    Horizontal menu example

HTMLAcademy menu example
A Pen by Nikolay on CodePen.
License.

  
## index.html
<html>
    <head>
       <title>Испытание: горизонтальное меню</title>
       <meta charset="utf-8">
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="/courses">Курсы</a></li>
            <li><a href="/demos">Демонстрации</a></li>
            <li class="active"><a href="/public_profiles">Участники</a></li>
            <li><a href="/achievements">Достижения</a></li>
        </ul>
    </body>
</html>

## style.css
html, body{
    margin:0;
    padding:0;
}
body{
    width:430px;
    min-height:280px;
    padding:10px;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    background:#ecf0f1;
}
.main-menu {
    width: auto;
    margin: 0;
    padding: 0;
    background:#2980B9;
    list-style: none;
}
.main-menu .active a{
    background:#1ABC9C;
}
.main-menu li{
    display: inline-block;
    margin-right: 5px;
    white-space: nowrap;
    border-left: 2px solid #2C3E50;
}
.main-menu a {
    display: block;
    padding: 10px 15px;
    margin-right: -10px;
    text-decoration: none;
    color: #fff;
}
.main-menu a:hover {
    background: grey;
}
	<html>
	<head>
	<title>Испытание: горизонтальное меню</title>
	<meta charset="utf-8">
	</head>
	<body>
	<ul class="main-menu">
	<li><a href="/courses">Курсы</a></li>
	<li><a href="/demos">Демонстрации</a></li>
	<li class="active"><a href="/public_profiles">Участники</a></li>
	<li><a href="/achievements">Достижения</a></li>
	</ul>
	</body>
	</html>
	html, body{
	margin:0;
	padding:0;
	}
	body{
	width:430px;
	min-height:280px;
	padding:10px;
	font-family:Arial, sans-serif;
	font-size:14px;
	line-height:1.4;
	background:#ecf0f1;
	}
	.main-menu {
	width: auto;
	margin: 0;
	padding: 0;
	background:#2980B9;
	list-style: none;
	}
	.main-menu .active a{
	background:#1ABC9C;
	}
	.main-menu li{
	display: inline-block;
	margin-right: 5px;
	white-space: nowrap;
	border-left: 2px solid #2C3E50;
	}
	.main-menu a {
	display: block;
	padding: 10px 15px;
	margin-right: -10px;
	text-decoration: none;
	color: #fff;
	}
	.main-menu a:hover {
	background: grey;
	}