<style> 
.nav {margin: 2px;}
.nav a{display: block; color:#000000; background-color: #ffffff; text-align: center; width:100px; padding: 4px; margin: 1px; text-decoration: none}
.nav a:hover{background-color: #000000; color:#ffffff}
</style> 

<div class="nav"> 
<a href="#">Ссылка 1</a> 
<a href="#">Ссылка 2</a> 
<a href="#">Ссылка 3</a> 
</div>

.nav - общее значение ссылок
margin: 2px - поле вокруг в два пикселя
.nav a - свойства самих кнопок
color:#000000 - цвет текста
background-color: #ffffff - цвет фона
text-align: center - текст по центру
width:100px - длина
padding: 4px - расстояние от края кнопок до текста
margin: 1px - поля вокруг ссылок
text-decoration: none - ссылка без украшений
.nav a:hover - ссылки при наведении
background-color: #000000 - цвет фона при наведении
color:#ffffff - цвет ссылок при наведении

Ставить все туда, где должна быть навигация. Код проверен.
Копирайт на форум обязателен

только эту часть кода нужно вставить в html вверх

а вот это уже туда, где вы хотите видеть ссылки, например в объявлении.

pun-title table

width - ширина блока
max-height - максимальная высота
overflow-y:scroll - включаем прокрутку по
top - отступ сверху
margin-left - отступ слева

Абсолютное положение объекта.

<div style="width:272px; max-height:185px; overflow-y:scroll; position: absolute; top: 16px; margin-left: 20px;">
Содержание блока
</div>

body

<div style="width:272px; max-height:185px; overflow-y:scroll; position: relative; top: -10px; left: -20px;">
Содержание блока
</div>

Разница с первым случаем лишь в том, что для поднятия блока вверх нужно писать отрицательное число. Поднять вверх на двадцать пикселей - "-20px", поэтому и расположение объекта будет относительным, а не аболютным.

О таблице
Права на идею переноса подобной таблицы принадлежат etiquette rules. При установке полной или частичной этого кода, который был полностью адаптирован под Rusff & Mybb указывайте откуда был взят код таблицы.

<div id="sidebar">

Наполнение таблицы

</div>

<style>

#sidebar {
  width: 205px; height: 110%;
  top: 0px; right: 0px; padding: 5px;
  background-color:#d2eb8f;
  text-align: center;
  position: fixed}

</style>

Пояснения по коду. Весь код сводится к простым истинам исполненным в css.

<div id="sidebar">

Создает для всего наполнения отсылку к css стилю. Обычно он прописывается более интересно и развернуто, но в данном примере все сведено до минимума. Все, что будет написано до закрывающего тега

</div>

Будет иметь параметры заданные в таблице каскадных стилей (css).

Что представляет из себя таблица и какие параметры за что отвечают.

<style>
#sidebar {width: 205px; height: 110%; top: 0px; right: 0px; padding: 5px; background-color:#d2eb8f; text-align: center; position: fixed}
</style>

width: 205px;

ширина сайдбара (панели) в пикселях.

height: 110%;

высота сайдбара. прописана здесь в процентах (110%), что означает, что сайд бар будет находится на протяжение всей страницы, какой бы высокой она не была. Параметр может быть заменен на значение в px (пикселях), для фиксированной высоты бара.

top: 0px; right: 0px;

отступы: сверху и справа соответственно. параметры могут принимать отрицательные значения, сдвигая панель так же и вниз, и влево.

background-color:#d2eb8f;

заливка таблицы цветом в шестеричной системе RBG. Данный параметр может быть заменен на изображение (скажем, на узор) следующей строкой

background-image : url("адрес_картинки");

text-align: center;

Выравнивание текста в таблице. В данном конкретном случае по центру. Может быть заменено на выравнивание по левому и правому краю.

position: fixed

параметр фиксирующий таблицу, не позволяя её прокручивать.

Приятного использования. Если появятся вопросы - не стесняйтесь - задавайте.

ВАЖНО этот код панели фиксирует её у края монитора, а не у края форума.