Привет!
Это пример страницы с двумя меню. Верхнее меню выполнено, как выпадающее, левое меню - вертикальное меню.
Оба меню выполнены на основе маркированных списков. Верхнее меню выполнено на основе вложенного списка.
Листинг кода HTML шаблона разметки этой страницы
<![CDATA[
<!--Контейнер страницы -->
<div id="container">
<!--Шапка страницы-->
<div id="header">
</div>
<!--Верхнее меню -->
<div id="topmenu">
</div>
<!--Левое меню -->
<div id="leftmenu">
</div>
<!--Основной контент -->
<div id="maincontent">
</div>
<!--Футер -->
<div id="footer">
</div>
</div>
]]>
Листинг стилей CSS для шаблона страницы
<![CDATA[
body {
font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
background: #e1dfb9; /* Цвет фона */
}
#container {
width: 800px; /* Ширина слоя */
margin: 0 auto; /* Выравнивание по центру */
background: #f0f0f0; /* Цвет фона */
}
#header {
text-align: center; /* Выравнивание по центру */
padding: 0; /* Отступы вокруг текста */
}
#topmenu{
background:#FFFF99;
}
#leftmenu {
margin-top: 10px;
width: 110px; /* Ширина слоя */
padding: 0 10px; /* Отступы вокруг текста */
float: left; /* Обтекание по правому краю */
}
#maincontent {
margin-left: 130px; /* Отступ слева */
padding: 20px; /* Поля вокруг текста */
background: #fff; /* Цвет фона правой колонки */
}
#footer {
background: #8fa09b; /* Цвет фона подвала */
padding: 5px; /* Отступы вокруг текста */
clear: left; /* Отменяем действие float */
}
#footer p {
text-align:center;
font-size:small;
color: #fff; /* Цвет текста */
}
]]>
Листинг кода HTML для верхнего выпадающего меню
<![CDATA[
<ul id="topnavbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">Адрес</a></li>
<li><a href="#">Телефон</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li><a href="#">О нас</a></li>
</ul>
]]>
Листинг стилей для верхнего меню
<![CDATA[
/*Верхнее выпадающее меню*/
#topnavbar ul { display: none; }
#topnavbar li:hover ul {
display: block;
background-color: #f90;
}
#topnavbar, #topnavbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topnavbar {
height: 30px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#topnavbar li {
float: left;
position: relative;
height: 100%;
}
#topnavbar li a {
display: block;
padding: 6px;
width: 100px;
color: #fff;
text-decoration: none;
text-align: center;
}
#topnavbar ul li { float: none; }
#topnavbar li:hover { background-color: #f90; }
#topnavbar ul li:hover { background-color: #666; }
]]>
Листинг кода для левого меню
<![CDATA[
<ul id="leftnavbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
]]>
Листинг стилей для левого меню
<![CDATA[
/*Левое меню*/
#leftnavbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#leftnavbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
#leftnavbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
#leftnavbar a:hover {
background-color: #666;
border-left: 5px solid #3333FF;
}
]]>