Помогите добавить подменю в вертикальное меню

интернет программирование html css веб дизайн

HTML - <div class="mid_button"><a href="/"><b>Главная</b></a></div>
<div class="mid_button1"><a href="http://zigan.ucoz.ru/index/uchitel/0-4"><b>Учитель</b></a></div>
<div class="mid_button2"><a href="http://zigan.ucoz.ru/index/uchenik/0-5"><b>Ученик</b></a></div>
<div class="mid_button3"><a href="http://zigan.ucoz.ru/index/roditeli/0-6"><b>Родители</b></a></div>
<div class="mid_button4"><a href="http://zigan.ucoz.ru/index/portfolio/0-7"><b>Портфолио</b></a></div>
<div class="mid_button5"><a href="http://zigan.ucoz.ru/photo"><b>Фотосюжеты</b></a></div>
<div class="mid_button6"><a href="http://zigan.ucoz.ru/index/kopilka/0-8"><b>Копилка</b></a></div>
</div>

CSS - #main_menu_master{width: 204px; margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; text-align: center; line-height: 45px;}
#main_menu_master a{display: block; color: black; text-decoration: none;}

.mid_button a{background: url(vertmenu.png); height: 39px; width: 204px; }
.mid_button1 a{background: url(vertmenu.png) 0 -39px; height: 39px; width: 204px;}
.mid_button1 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button2 a{background: url(vertmenu.png) 0 -78px; height: 39px; width: 204px;}
.mid_button2 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button3 a{background: url(vertmenu.png) 0 -117px; height: 39px; width: 204px;}
.mid_button3 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button4 a{background: url(vertmenu.png) 0 -156px; height: 39px; width: 204px;}
.mid_button4 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button5 a{background: url(vertmenu.png) 0 -195px; height: 39px; width: 204px;}
.mid_button5 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button6 a{background: url(vertmenu.png) 0 -234px; height: 39px; width: 204px;}
.mid_button6 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button7 a{background: url(vertmenu.png) 0 -273px; height: 39px; width: 204px;}
.mid_button7 a:hover{background: url(vertmenu.png) 0 39px;}
.mid_button a:hover{background: url(vertmenu.png) 0 39px;}

Примечание:
#main_menu_master{width: 204px; margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; text-align: center; line-height: 45px;}
#main_menu_master a{display: block; color: black; text-decoration: none;}
#main_menu_master a:hover{background: url(vertmenu.png) 0 39px;}

.mid_button a{background: url(vertmenu.png); height: 39px; width: 204px; }
.mid_button1 a{background: url(vertmenu.png) 0 -39px; height: 39px; width: 204px;}
.mid_button2 a{background: url(vertmenu.png) 0 -78px; height: 39px; width: 204px;}
.mid_button3 a{background: url(vertmenu.png) 0 -117px; height: 39px; width: 204px;}
.mid_button4 a{background: url(vertmenu.png) 0 -156px; height: 39px; width: 204px;}
.mid_button5 a{background: url(vertmenu.png) 0 -195px; height: 39px; width: 204px;}
.mid_button6 a{background: url(vertmenu.png) 0 -234px; height: 39px; width: 204px;}
.mid_button7 a{background: url(vertmenu.png) 0 -273px; height: 39px; width: 204px;}


Ну вот CSS по другому
Ответы:
У меня на работе за такой CSS руки отбивают
чтобы не вдаваться в Ваш код, вот пример:


10 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.