Меню выпадающее 6 уровневое,работает без применения скриптов,используются только свойства CSS3.Основные регулировки настроены для работы,для изменения цвета фона секций измените значения для свойства background.Для изменения цвета текста в секциях измените значения свойства color.Для изменения размера текста измените значение свойства font-size.На сайте есть статьи по всем свойствам и тегам,воспользуйтесь поиском введя в него название интересующего элемента.Можно установить весь код со стилями,можно стили перенести в файл основных стилей ( не рекомендуется ).
Код меню для установки
<style> #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;} #pmenu {margin:30px 0 auto 0; position:relative; z-index:500;} #pmenu li {float:left;position:relative;} #pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;} #pmenu li:hover > a{background:#dfd7ca; color:#c00;} #pmenu li ul {display: none;} #pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;} #pmenu > li:hover > ul {left:0; top:24px;} </style> <ul id="pmenu"> <li><a href="#">Top Level 1</a></li> <li><a href="#">Top Level 2</a></li> <li><a href="#">Top Level 3 ►</a> <ul> <li><a href="#">Sub Level 1a</a></li> <li><a href="#">Sub Level 1b</a></li> <li><a href="#">Sub Level 1c ►</a> <ul> <li><a href="#">Sub Level 2a</a></li> <li><a href="#">Sub Level 2b ►</a> <ul> <li><a href="#">Sub Level 3a</a></li> <li><a href="#">Sub Level 3b ►</a> <ul> <li><a href="#">Sub Level 4a</a></li> <li><a href="#">Sub Level 4b</a></li> <li><a href="#">Sub Level 4c ►</a> <ul> <li><a href="#">Sub Level 5a</a></li> <li><a href="#">Sub Level 5b</a></li> <li><a href="#">Sub Level 5c</a></li> <li><a href="#">Sub Level 5d ►</a> <ul> <li><a href="#">Sub Level 6a</a></li> <li><a href="#">Sub Level 6b</a></li> <li><a href="#">Sub Level 6c</a></li> <li><a href="#">Sub Level 6d</a></li> </ul> </li> <li><a href="#">Sub Level 5e</a></li> <li><a href="#">Sub Level 5f</a></li> </ul> </li> <li><a href="#">Sub Level 4d</a></li> <li><a href="#">Sub Level 4e</a></li> <li><a href="#">Sub Level 4f</a></li> </ul> </li> <li><a href="#">Sub Level 3c</a></li> <li><a href="#">Sub Level 3d</a></li> </ul> </li> <li><a href="#">Sub Level 2c</a></li> </ul> </li> <li><a href="#">Sub Level 1d</a></li> <li><a href="#">Sub Level 1e</a></li> </ul> </li> <li><a href="#">Top Level 4</a></li> <li><a href="#">Top Level 5</a></li> <li><a href="#">Top Level 6</a></li> </ul>
|