Меню+банер

html-код

для меню

<header>
<nav>
<ul>
<li><a href="#">Біологія</a></li>
<li><a href="#">Ботаніка</a></li>
<li><a href="#">Зоологія</a></li>
<li><a href="#">Анатомія</a></li>
</ul>
</nav>
</header>

для довідки

<div class="help">
   <img src="logs.png" alt="" width="100" height="100">
   Якщо у вас виникли питання по цьому коду, знайдіть додаткову інформацію на сайті:<a href="http://htmlbook.ru/">   htmlbook.ru</a>.
  </div>

CSS

для меню

nav li {
display: inline;
}
nav a {
display: inline-block;
text-decoration: none;
font-size: 1.2em;
color: #ffffff;
padding: 10px 20px;
background: #ff932d;
border-radius: 5px;
border: 1px solid #c95e00;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
text-shadow:
0px -1px 1px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
nav a {
  transition: transform .5s,
              background-color 1s ease-in .5s;
    -webkit-transition: -webkit-transform .5s,
              background-color 1s ease-in .5s;
}
nav a:hover {
background-color: red;
transform: scale(1.5);
  -webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
 }

для довідки

.help{
    border-radius: 0 10px 10px 0;
    width: 300px;
    background: #696969;
    color: #fff;
    position: fixed; /* Фіксуємо на одному місці */
    min-height: 100px;
    top: 100px; left: -320px;
    border-right: 20px solid #fc0; /* Оранжева границя справа */
    padding: 10px;
    transition: left 1s; /* Анімація */
   }
   .help img {
    float: left;
    margin: 0 10px 0 0;
   }
   .help::after {
    content: 'Довідка'; /* Виводимо текст */
    color: #000;
    position: absolute; /* Абсолютне позиціювання */
    right: -35px; bottom: 50px;
    transform: rotate(-90deg); /* Повертає текст */
    -webkit-transform: rotate(-90deg);
   }
   .help:hover {
    left: 0; /* При наведенні зсуває вправо */
   }

Картинки тут