|
Почему меню не выпадает?Обсуждение темы Почему меню не выпадает? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Сделал выпадающее меню через списки HTML при наведении на пункт меню не выпадает Код HTML: <nav class= "menu_hat" > <ul> <li> <a href= ... |
|
Опции темы |
09.12.2018, 20:46 | #1 |
|
Сделал выпадающее меню через списки HTML при наведении на пункт меню не выпадает
Код HTML:
<nav class="menu_hat"> <ul> <li><a href="/new">Новости</a></li> <li><a href="/menu/office">Офис</a> <ul > <li><a href="/firstsheet">О компании</a></li> <li><a href="/catalog/school">Школа</a></li> <!-- Курсы это школа, будут какието семинары для повышения ( это наверно будет общая на всех или разные отделы группы школ по интересам) --> <li><a href="/album">Фотокарточки</a></li> <li><a href="/filebox">Амбар</a></li> </ul> </li> <li><a href="/menu/product">Продукт</a> <ul > <li><a href="/store">Прайс</a></li> <li><a href="/catalog/dragee">Драже и крем</a></li> <li><a href="/catalog/cosmetic">Косметика</a></li> <li><a href="/catalog/drinkmineral">Живые напитки</a></li> </ul> </li> <li><a href="/menu/bortnik">Бортник</a> <ul > <li><a href="/event">Численник</a></li> <li><a href="/catalog/apiary">Пасека</a></li> <li><a href="/catalog/science">Оч'умелые ручки</a></li> <!-- игры для детей (лапта, банки склянки), наукова думка, наука из ничего, просто о сложном чему учили в школе физика математика химия--> <li><a href="/catalog/song">Песни стихи</a></li> </ul> </li> <li><a href="/menu/contact">Контакт</a> <ul > <li><a href="/location">Визитка</a></li> <li><a href="/guestbook">Книга гостей</a></li> </ul> </li> </ul> </nav> Код:
/* блок меню (возможно надо сделать через вложенность)*/ .menu_hat ul{ margin: 0px; /* обнуляем внешние поля */ padding: 0px; /* обнуляем внутренние отступы */ list-style: none; /* убираем маркеры списков */ } .menu_hat, .menu_site, .sizon_button {/* */ width: 840px; margin: 0 auto; font: bold 13px/25px Tahoma, Arial, sans-serif; /* шрифт меню, жирный, без засечек ( sans-serif ) (размер px/отступ между строк px)*/ letter-spacing: 1px; /* отступ между буквами */ text-transform: uppercase; /* все буквы прописные */ } .menu_hat ul li ul li{ float: none; /* отменяем обтикание для внутренних элементов списков, они распологаются в столбик*/ } .menu_hat a { display: block; /* делаем ссылки блоками */ white-space: nowrap; /* запрещаем перевод строк */ padding: 2px 35px; /* внутренние отступы (ширина по бокам) (ширина)*/ } .menu_hat ul li{ display: block; /* делаем ссылки блоками */ position: relative; /* относительное позиционирование */ float: left; /* обтикание одного пункта относительно другова, пункты меню распологаются свлева направо, как и записаны в том порядке */ border-bottom: 2px solid transparent; white-space: nowrap; /* запрещаем перевод строк */ /*padding: 0px 20px; внутренние отступы пунктов (высота) (ширина)*/ margin-right: 20px; } .menu_hat a{ color: #4f576d; } .menu_hat ul li ul { display: none; /* скрываем внутренние списки */ } .menu_hat ul li a:hover .menu_hat ul li ul, .menu_hat ul li.ie6 .menu_hat ul li ul { display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */ background: #4f576d; /* цвет фона */ margin-left: -30px; /* Сдвигаем подменю влево */ color: #ffa500; /* цвет текста внутренних ссылок */ position: relative; /* абсолютное позиционирование внутренних списков */ min-width: 140px; /* минимальная ширина подпунктов */ width: auto !important; /* для поддержки IE6 */ width: 140px; /* минимальная ширина подпунктов для IE6 */ overflow: hidden; -webkit-box-shadow: 0 0 7px 0 #99958c; /* тень для разных браузеров */ -moz-box-shadow: 0 0 7px 0 #99958c; /* тень для разных браузеров */ box-shadow: 0 0 7px 0 #99958c; /* тень цвет кварцевый*/ } .menu_hat li ul a:hover, .menu_hat li ul.ie6 a { /* полоска выделитель */ color: #4f576d; /* цвет текста внутренних ссылок при наведении курсора на них самих (#58eb51) зелёный цвет сочетается с чёрным*/ background: #ffa500; /* фон пунктов при наведеии*/ border-bottom: none; /* убираем подчёркивание у пунктов */ box-shadow: 0 0 5px 0 #ffbe47; /* плавное угосание после отведения от пункта (быстро появляется плавно ичезает - надо сделать)*/ } .menu_hat a:hover, .menu_hat.ie6 a { color: #4f576d; /* цвет текста пунктов при наведении курсора */ border-bottom: none; /* убираем подчёркивание у подпунктов*/ } помогите пожалуйста Последний раз редактировалось kostia; 09.12.2018 в 20:46.. Причина: Добавлено сообщение |
|
10.12.2018, 14:38 | #2 |
|
А где у тебя JavaScript язык
|
|
17.12.2018, 23:05 | #3 |
|
для чего?
всё, нашел в чём причина, спасибо пробел убрать перед : |
|
18.12.2018, 14:04 | #4 |
|
На сколько я понял, ты добился через css. Но проблема может возникнуть, когда ты будешь поверять свой сайт во всех браузерах.
|
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
почему флеш меню не на всех страницах? | AJleKc | Технологии Flash | 6 | 24.03.2011 08:12 |
Меню на cms DLE, вид меню, папки (открыты, закрыты) | 74ivan74 | Кальянная | 0 | 12.08.2009 20:03 |
Не открывается *.fla!!! Почему??? | commander9191 | Технологии Flash | 10 | 10.01.2008 11:58 |
почему со мной все на вы? | m_Stasuk | Кальянная | 16 | 18.10.2005 12:16 |
Почему так? | vision | HTML, CSS, JavaScript | 1 | 11.08.2003 12:30 |
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|