1

Topic: Выпадающее верхнее меню для сайта на CSS

Есть много способов сделать выпадающее меню для сайта, но мы рассмотрим самый простой основанный на чистом CSS. В теме приведены рвзные варианты выпвдающего меню уже с готовой HTML страницей.
Итак, вначале приведу разметку для меню, а затем виды CSS.
Создадим файл menu.html и поместим в него след. код.

Spoiler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar"  lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Верхнее выпадающее меню</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div>

<ul id="menu">
        <li><a href="#">Выпадающее №1</a></li>
        <li>
                <a href="#">Выпадающее №2</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Пункт №3</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                        <li><a href="#">Подпункт №4</a></li>
                        <li><a href="#">Подпункт №5</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Пункт №4</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Пункт №5</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                        <li><a href="#">Подпункт №4</a></li>
                        <li><a href="#">Подпункт №5</a></li>
                </ul>
        </li>
</ul>

</div>
</body>
</html>

Один из следующих вариантов стиля для выпадающего меню подключить вставив в разметку страницы.
Выпадающее меню 1

Spoiler

<style>
#menu {
        padding: 0;
        margin: 0;
        font-size: 100%;
        font-family: Georgia;
        }
#menu li {
        list-style: none;
        float: left;
        height: 33px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #171717;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 45px;
        }
#menu li ul li {
        float: none;
        height: 33px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #7F7F7F;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 33px;
        color: #fff;
        text-decoration: none;
        }
#menu li:hover ul, #menu li.jshover ul {
        display: block;
        }
#menu li:hover, #menu li.jshover {
        background: #424242;
        }
</style>

Выпадающее меню 2 (css встроен в разметку)

Spoiler
<style>
#nav7, #nav7 ul, #nav7 li {
  margin: 0;
  padding: 0;
}
#nav7, #nav7 ul {
  background: rgb(46,95,122);
}
#nav7 { /* подменю перемещается относительно меню */
  position: relative;
  display: table;
  width: 100%;
}
#nav7 ul { /* подменю находится вне потока */
  position: absolute;
  z-index: 5;
  display: none;
}
#nav7 li:hover ul { /* подменю будет показано, если курсор наведён на пункт меню с выпадающем списком */
  display: block;
}
#nav7 li {
  display: table-cell;
  text-align: center;
}
#nav7 ul li {
  display: block;
  text-align: left;
}
#nav7 .right { /* последнее подменю будет расширяться справа налево */
  direction: rtl;
}
#nav7 .right ul { /* для IE, решение найдено случайно, где связь ??? */
  right: 0;
}
#nav7 .right li { /* последнее подменю будет расширяться справа налево, но не пункты последнего подменю */
  direction: ltr;
}
#nav7 a {
  display: block;
  padding: 3px 0;
  color: #fff;
  text-decoration: none;
}
#nav7 ul a {
  padding: 3px 15px;
}
#nav7 li:hover {
  background: rgb(96,145,172);
}
</style>

<ul id="nav7">
  <li><a href="#1">Выпадающее 1</a>
  <li><a href="#2">Выпадающее  2</a>
      <ul>
        <li><a href="#2-1">Подменю 1</a>
        <li><a href="#2-2">Подменю 2</a>
        <li><a href="#2-3">Подменю 3</a>
        <li><a href="#2-4">Подменю 4</a>
      </ul>
  <li><a href="#3">Выпадающее  3</a>
      <ul>
        <li><a href="#3-1">Подменю 1</a>
        <li><a href="#3-2">Подменю 2</a>
      </ul>
  <li class="right"><a href="#4">Выпадающее  4</a>
      <ul>
        <li><a href="#4-1">Подменю 1</a>
        <li><a href="#4-2">Подменю 2</a>
        <li><a href="#4-3">Подменю 3</a>
      </ul>
</ul>

Цвет и размер выпадающего верхнего меню можно настроить по своему вкусу.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

2

Re: Выпадающее верхнее меню для сайта на CSS

Выпадающее меню с описанием к настройкам  css.

Spoiler

более продвинутое

<style>
/*------------------------------------*\
    НАВИГАЦИЯ
\*------------------------------------*/
#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    
    text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#333;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}

#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}

#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}

#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}

#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#333;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}
</style>

<ul id="nav">
    <li>
        <a href="#" title="Вернуться на главную страницу">Главная</a>
    </li>
    <li>
        <a href="#" title="Информация о компании">О нас</a>
        <ul>
            <li><a href="#">Продукты</a></li>
            <li><a href="#">Команда</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Что мы можем для вас сделать">Услуги</a>
        <ul>
            <li><a href="#">Услуга один</a></li>
            <li><a href="#">Услуга два</a></li>
            <li><a href="#">Услуга три</a></li>
            <li><a href="#">Услуга четыре</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Наша продуктовая линейка">Продукты</a>
        <ul>
            <li><a href="#">Маленький продукт (первый)</a></li>
            <li><a href="#">Маленький продукт (второй)</a></li>
            <li><a href="#">Маленький продукт (третий)</a></li>
            <li><a href="#">Маленький продукт (четвертый)</a></li>
            <li><a href="#">Большой продукт (пятый)</a></li>
            <li><a href="#">Большой продукт (шестой)</a></li>
            <li><a href="#">Большой продукт (седьмой)</a></li>
            <li><a href="#">Большой продукт (восьмой)</a></li>
            <li><a href="#">Невообразимый продукт (девятый)</a></li>
            <li><a href="#">Невообразимый продукт (десятый)</a></li>
            <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Как с нами связаться">Контакт</a>
        <ul>
            <li><a href="#">Часы работы</a></li>
            <li><a href="#">Местоположение</a></li>
        </ul>
    </li>
</ul>

Верхнее меню для сайта с темным фоном.

Spoiler
<style>
#menu {
        padding: 0;
        margin: 0;
        font-size: 100%;
        font-family: Georgia;
        }
#menu li {
        list-style: none;
        float: left;
        height: 33px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #171717;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 45px;
        }
#menu li ul li {
        float: none;
        height: 33px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #7F7F7F;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 33px;
        color: #fff;
        text-decoration: none;
        }
#menu li:hover ul, #menu li.jshover ul {
        display: block;
        }
#menu li:hover, #menu li.jshover {
        background: #424242;
        }
</style>

<ul id="menu">
        <li><a href="#">Меню №1</a></li>
        <li>
                <a href="#">Меню №2</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Меню №3</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                        <li><a href="#">Подпункт №4</a></li>
                        <li><a href="#">Подпункт №5</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Меню №4</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Меню №5</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                        <li><a href="#">Подпункт №4</a></li>
                        <li><a href="#">Подпункт №5</a></li>
                </ul>
        </li>
</ul>
Если вам долго не отвечают, пишите автору темы в личку или на Email.