Не получается сделать выпадающее горизонтальное меню

Не получается сделать выпадающее горизонтальное меню, примеры из сети не помогли

klipsa

Сообщений: 46 Регистрация: Май 2011

#16

5 Мая 2015 22:48

да да я в курсе) все сделаю)

Иван Иванов

Сообщений: 13 Регистрация: Апр 2015

#17

6 Мая 2015 04:47

Код

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   
      *{
         font-family: sans-serif;
         margin: 0;
         padding: 0;
      }
      
      nav{
         width: 80%;
         margin: auto;
      }

      nav ul{
         display: table;
         width:100%;
         text-align: center;
         position: relative;
      }

      nav li{
         display: table-cell;

      }

      nav li a{
         display: block;
         background: #808080;
         color: #fff;
         line-height:50px;
         text-decoration:none;
         text-transform:uppercase;
         border-bottom: 2px solid #626262;
      }
      
      nav ul ul{
         position: absolute;
         width: 20%;
         margin: 0;
         padding: 0;
      }

      nav li a:hover{
         background: #fff;
         color: #000;
      }

      .vi li{
         display: none;
      }

      nav li:hover li{
         display: inline;
      }
   </style>
</head>
<body>
   <div class="wrap">
      <nav>
         <ul>
            <li><a href="#">Пункт 1</a>
               <ul class="vi">
                  <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="#">Пункт 2</a>
               <ul class="vi">
                   <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="#">Пункт 3</a>
               <ul class="vi">
                   <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 class="vi">
                   <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="#">Пункт 5</a>
               <ul class="vi">
                   <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>
      </nav>
   </div>
</body>
</html>

Ещё вариант взято здесь ( http://3apok.ru/css/11-menu2 )

Изменено: Иван Иванов - 6 Мая 2015 04:50

Валентин

Сообщений: 621 Регистрация: Май 2010

#18

6 Мая 2015 20:53

Цитата
Иван Иванов пишет: Ещё вариант

а разницу этих вариантов Вы понимаете?

Код
.vi li{ display: none; }

почитайте, как поисковики относятся к такому правилу в стилях...

инвестиции

klipsa

Сообщений: 46 Регистрация: Май 2011

#19

6 Мая 2015 23:46

Валентин!!!! спасите еще разок, пожалуйста))) когда навожу на самый крайний правый пункт (заказ) выделяется все меню, а не один этот пункт. Как исправить?
И еще как изменить центрирование и тд в дополнительных пунктах?

Изменено: klipsa - 6 Мая 2015 23:52

Валентин

Сообщений: 621 Регистрация: Май 2010

#20

7 Мая 2015 08:01

Цитата
klipsa пишет: Валентин!!!! спасите еще разок, пожалуйста))) когда навожу на самый крайний правый пункт (заказ) выделяется все меню, а не один этот пункт. Как исправить?

добавьте в стили

Код
#nav ul#nav_list li {overflow:hidden;}

Цитата
И еще как изменить центрирование и тд в дополнительных пункта

я не понял, что Вы хотите сделать... smile:)

за дополнительные пункты списка отвечает #nav ul#nav_list li ul.menu_list li,
а за ссылки из этого списка #nav ul#nav_list li ul.menu_list li a ...

klipsa

Сообщений: 46 Регистрация: Май 2011

#21

7 Мая 2015 15:26

все получилось!! огромное спасибо)))

Изменено: klipsa - 7 Мая 2015 15:32

Иван Иванов

Сообщений: 13 Регистрация: Апр 2015

#22

8 Мая 2015 11:30

Цитата

Валентин пишет:

Цитата
Иван Иванов пишет: Ещё вариант

а разницу этих вариантов Вы понимаете?

Код
.vi li{ display: none; }

почитайте, как поисковики относятся к такому правилу в стилях...

Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки, и когда это используется для стилистического оформления.

Валентин

Сообщений: 621 Регистрация: Май 2010

#23

8 Мая 2015 17:28

Цитата
Иван Иванов пишет: Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки, и когда это используется для стилистического оформления.

а у Вас в списке что?

Иван Иванов

Сообщений: 13 Регистрация: Апр 2015

#24

8 Мая 2015 17:53

Цитата

Валентин пишет:

Цитата
Иван Иванов пишет: Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки , и когда это используется для стилистического оформления.

а у Вас в списке что?

Ну и о чём тут с Вами разговаривать, если Вы не способны понять ту мысль которую до Вас пытаются донести.

Валентин

Сообщений: 621 Регистрация: Май 2010

#25

9 Мая 2015 14:49

я понял ту мысль, которую Вы пытаетесь донести, но я также знаю, что за display: none; и visibility: hidden; можно запросто схлопотать пессимизацию, и не важно, для чего Вы это применяете, для стилистического оформления или для скрытия ссылок...

Иван Иванов

Сообщений: 13 Регистрация: Апр 2015

#26

9 Мая 2015 23:56

Цитата

Валентин пишет:
я понял ту мысль, которую Вы пытаетесь донести, но я также знаю, что за display: none; и visibility: hidend; можно запросто схлопотать пессимизацию, и не важно, для чего Вы это применяете, для стилистического оформления или для скрытия ссылок...

Вы плетёте чушь изображая умный вид. Никому из поисковиков со своими display: none; и visibility: hidend; вы и задаром не нужны. В отличие от Вас они умнее. И знают как и что пытаются скрыть и какими методами. За использование этих свойств css никаких банов и санкций не накладывают.

Валентин

Сообщений: 621 Регистрация: Май 2010

#27

10 Мая 2015 01:32

Цитата

Иван Иванов пишет:
Вы плетёте чушь изображая умный вид. Никому из поисковиков со своими display: none; и visibility: hidend; вы и задаром не нужны. В отличие от Вас они умнее. И знают как и что пытаются скрыть и какими методами. За использование этих свойств css никаких банов и санкций не накладывают.

да, я тупой и обычно несу чушь smile:)

...на этом распрощаемся

desertFox Сообщений: 252 Регистрация: Июл 2013	#28 10 Мая 2015 17:27 если навигация обёрнута в тег <nav>, то и за использование display:none; для скрытия ссылок в меню никаких санкций со стороны поисковиков не будет, я сам использую display:none; в меню более года, всё нормально

Похожие темы:

13.05.2023 00:13	Как сделать правильно robot.txt
28.02.2021 23:08	Подскажите нужно ли открытие каталога на сайте по наведению или лучше сделать по клику?
29.11.2020 16:54	Не получается разбить список на 4 не равномерных колонки
13.10.2019 15:10	Как сделать адаптивность ширины сайта?
05.09.2019 21:58	Как сделать сайт, где пользователи смогут оставлять свои статьи

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
23:01 Ошибка стоимостью в $100 млрд. Как чат-бот привел к падению стоимости Google 19:57 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 17:19 AviTool - мощный инструмент для автоматизации работы с Avito 23:26 соцсеть Norm для нормальных людей 13:10 Попытка взлома 11:21 LGaming - экосистема и партнерская программа в gambling и betting вертикалях 11:07 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов	16:18 Metrochange – безопасный обменник ваших криптовалют по выгодным курсам 16:00 Продвижение сайтов в поисковых системах, анализ вашего сайта абсолютно бесплатно (первым 3-м обратившимся) 01:24 Cosmochanger.cc - Самый реактивный обменник. Быстрый и безопасный способ обменять более 20 популярных криптовалют 23:46 Undetectable - антидетект браузер для быстрой и безопасной работы в сети. 23:44 Мытнинский - безопасный обмен криптовалют с 2018 года 23:36 Зарабатывайте на P2P-обмене Bitbanker без курсовых рисков 13:44 Ручное размещение вечных статей и ссылок на хороших площадках. Опыт 15 лет!	02:48 В России начали блокировать VPN-подключения 22:01 Уволили за 47 опозданий - отсудила "за расизм" $11 млн у работодателя 21:37 Российский «китайский файрвол», который сделает бессмысленными VPN-сервисы 20:19 Стряхнуть обыденность - об Агасфере 13:42 CPA.HOUSE - Топовая CPA сеть 23:15 С юмором по жизни! 23:12 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди