HTML код:
<ul id="menu"> <li><a href="#">Пункт 1</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> <li><a href="#">Пункт 2</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> <li><a href="#">Пункт 3</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> </ul>
CSS код:
<style type="text/css"> ul, li { list-style: none; /* убираем маркеры списков */ margin: 0; /* обнуляем внешние поля */ padding: 0; /* обнуляем внутренние отступы */ } #menu { height: 35px; /* высота основного меню */ background-color: rgba(255, 13, 0, 0,4); /* Цвет фона и значение прозрачности */ font: bold 14px/25px Arial, sans-serif; /* стили шрифта */ position: fixed; /* Фиксированное положение */ margin: -30px 0px 0px 500px; /* Задаёте свои отступы элемента */ } #menu li { float: left; /* элементы списков всплывают влево */ background-color: rgba(255, 13, 0, 0.6); /* Цвет фона и значение прозрачности */ position: relative; /* относительное позиционирование */ } #menu ul li { float: none; /* отменяем всплытие для внутренних элементов списков */ } #menu a { display: block; /* делаем ссылки блоками */ color: #fff; /* цвет текста ссылок */ text-decoration: none; /* убираем подчеркивание */ white-space: nowrap; /* запрещаем перевод строк */ padding: 5px 10px; /* внутренние отступы */ border-bottom: 1px solid #DDDDDD; /* Параметры границы */ border-right: 1px solid #DDDDDD; /* Параметры границы */ } #menu ul a { min-width: 150px; /* минимальная ширина подпунктов */ width: auto !important; /* для поддержки IE6 */ width: 150px; /* для IE6 */ } #menu ul { position: absolute; /* абсолютное позиционирование внутренних списков */ display: none; /* скрываем внутренние списки */ } #menu li:hover ul, #menu li.ie6 ul { display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */ } #menu li:hover ul a, #menu li.ie6 ul a { background-color: rgba(255, 13, 0, 0.2); /* Цвет фона и значение прозрачности */ } #menu li:hover a, #menu li ul a:hover, #menu li.ie6 a { background-color: rgba(255, 13, 0, 0.6); /* Цвет фона и значение прозрачности */ } </style>