html-код
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Горизонтальне меню</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body class="gorizont">
<ul class="mainNav">
<li><a href="/index.html" class="homeLink">Головна</a></li>
<li><a href="https://goo.gl/KXHBgA" target="_blank" class="bioLink">Біологія</a></li>
<li><a href="https://goo.gl/2BDBm1" target="_blank" class="botLink">Ботаніка</a></li>
<li><a href="https://goo.gl/BcGbgD" target="_blank" class="zooLink">Зоологія</a></li>
<li><a href="https://goo.gl/odhA7P" target="_blank" class="antLink">Анатомія</a></li>
</ul>
</body>
</html>
css-стиль
body {font: 62.5% Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
.mainNav {
margin: 0;
padding: 0;
list-style: none;
}
.mainNav li {
float: left;
width: 14em;
}
.mainNav li:last-of-type a {
border-right: 1px dashed #999;
}
.mainNav a {
color: #000;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
border: 1px dashed #999;
border-right: none;
padding: 7px 5px 7px 30px;
display: block;
background-color: #E7E7E7;
background-image: url(nav.png);
background-repeat: no-repeat;
background-position: 0 2px;
}
.mainNav a:hover {
font-weight: bold;
background-color: #B2F511;
background-position: 3px 50%;
}
.gorizont .homeLink
{
background-color: #FFFFFF;
background-position: 3px 100%;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}
Немає коментарів:
Дописати коментар