Не получается сделать выпадающее горизонтальное меню
Страницы: Пред. 1 2
Не получается сделать выпадающее горизонтальное меню, примеры из сети не помогли
да да я в курсе) все сделаю)
Код
<!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
Цитата
Иван Иванов пишет:
Ещё вариант
а разницу этих вариантов Вы понимаете?

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

почитайте, как поисковики относятся к такому правилу в стилях...
Валентин!!!! спасите еще разок, пожалуйста))) когда навожу на самый крайний правый пункт (заказ) выделяется все меню, а не один этот пункт. Как исправить?
И еще как изменить центрирование и тд в дополнительных пунктах?
Изменено: klipsa - 6 Мая 2015 23:52
Цитата
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 - 7 Мая 2015 15:32
Цитата
Валентин пишет:
Цитата
Иван Иванов пишет:
Ещё вариант
а разницу этих вариантов Вы понимаете?
Код
  .vi li{
      display: none;
   } 

почитайте, как поисковики относятся к такому правилу в стилях...
Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки, и когда это используется для стилистического оформления.
Цитата
Иван Иванов пишет:
Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки, и когда это используется для стилистического оформления.
smile:D а у Вас в списке что?
Цитата
Валентин пишет:
Цитата
Иван Иванов пишет:
Не надо считать поисковики идиотами. Они способны понимать когда текст скрыт с целью обмана, например для скрытия ссылки , и когда это используется для стилистического оформления.
smile:D а у Вас в списке что?
Ну и о чём тут с Вами разговаривать, если Вы не способны понять ту мысль которую до Вас пытаются донести.
я понял ту мысль, которую Вы пытаетесь донести, но я также знаю, что за  display: none; и  visibility: hidden; можно запросто схлопотать пессимизацию, и не важно, для чего Вы это применяете, для стилистического оформления или для скрытия ссылок...
Цитата
Валентин пишет:
я понял ту мысль, которую Вы пытаетесь донести, но я также знаю, что за display: none; и visibility: hidend; можно запросто схлопотать пессимизацию, и не важно, для чего Вы это применяете, для стилистического оформления или для скрытия ссылок...
Вы плетёте чушь изображая умный вид. Никому из поисковиков со своими display: none; и visibility: hidend; вы и задаром не нужны. В отличие от Вас они умнее. И знают как и что пытаются скрыть и какими методами. За использование этих свойств css никаких банов и санкций не накладывают.
Цитата
Иван Иванов пишет:
Вы плетёте чушь изображая умный вид. Никому из поисковиков со своими display: none; и visibility: hidend; вы и задаром не нужны. В отличие от Вас они умнее. И знают как и что пытаются скрыть и какими методами. За использование этих свойств css никаких банов и санкций не накладывают.
да, я тупой и обычно несу чушь smile:)...на этом распрощаемся
если навигация обёрнута в тег <nav>, то и за использование display:none; для скрытия ссылок в меню никаких санкций со стороны поисковиков не будет, 
я сам использую display:none; в меню более года, всё нормально
Страницы: Пред. 1 2
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
20:19 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы | Еженедельные Выплаты | CPA до $950 
18:01 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
16:12 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
15:23 Adtrafico - Правильная партнёрская сеть под бурж трафик 
14:56 Партнерская программа OWNR WALLET 
14:12 Кто как борется с РКН и компанией? 
01:01 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
21:01 Ural-obmen.ru — выгодный сервис обмена 
20:55 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
18:56 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 
17:44 Первокомменты в Telegram — способ, который дает 1000 заявок в месяц! 
15:21 Комплексный прогон по трастовым сайтам, статейное размещение. Рост НЧ-СЧ, Тиц-пр. 
12:10 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
11:47 TETChange-Обменник криптовалют 
02:06 Точные прогнозы на футбол 
22:33 В России летом могут представить возможный аналог YouTube 
07:28 150+ хакерских поисковых систем и инструментов 
21:31 У Sora появился конкурент из Китая — нейросеть Kling, которая генерирует 1080p-видеоролики по описанию 
21:29 В России готовят проект о запрете рекламы в заблокированных соцсетях 
21:25 В соцсети Х (экс-Twitter) разрешили размещать эротику и порно 
08:22 С юмором по жизни!