|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
18.01.2015, 14:12 | #1 |
Новичок
Джуниор
Регистрация: 18.01.2015
Сообщений: 1
|
помогите с горизонтальным меню
здравствуйте, помогите пожалуйста с кодом, мне нужно сделать сложное
горизонтальное меню вот как получается а нужно что-бы кнопки первого уровня не растягивались и все остальное появлялось при наведении на кнопку первого уровня код разметки. Заранее благодарен за ваше потраченное время Код HTML:
<menu id="menu"> <li class="red">блабла <ul> <h3 class="cat">Категория</h3> <li>второй уровень</li> </ul> </li> <li class="green">блабла</li> <li class="orang">блабла</li> <li class="blue">блабла</li> <li class="aqua">блабла</li> <li class="chid">блабла</li> <li class="groen">блабла</li> <li class="gray">блабла</li> <li class="yellow">блабла</li> </menu> Код HTML:
li{ list-style:none outside none; } #menu{ color:#000; list-style: none outside none; display:table; margin:0px -40px; padding:opx; font:15pt "sans-serif"; text-shadow:0 0 1px red; width:100%; } #menu li{ float:none; position:relative; display:table-cell; background: none repeat scroll 0 0 #fffb92; padding:8px 0px; border-radius:0 20px; text-align:center; width:11.1% } #menu .red:hover{ background: #ff5555; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .green:hover{ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .orang:hover{ background: #ffc255; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .blue:hover{ background: #5555ff; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .aqua:hover{ background: #00ffff; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .chid:hover{ background: #a044cc; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .groen:hover{ background: #802b2b; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .gray:hover{ background: #4c4c4c; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu .yellow:hover{ background: #ffdd00; /* Old browsers */ color:#fff; border-radius:20px 0px; transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; } #menu li ul{ display:table-cell; list-style:outside none none; } #menu li ul .cat{ display:table; margin-top:20px; } |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
помогите с меню на паскале | sldj1 | Помощь студентам | 4 | 25.05.2014 22:12 |
помогите с выпадающим меню | bsgroupua | JavaScript, Ajax | 0 | 25.12.2009 23:58 |
Помогите с меню | Zefir008 | Общие вопросы C/C++ | 0 | 03.05.2009 16:17 |
Помогите сделать меню | Андрюха из ПХТТ | Паскаль, Turbo Pascal, PascalABC.NET | 4 | 09.02.2008 20:01 |
компонент RadioGroup был горизонтальным, а не вертикальным? | Artem | Общие вопросы Delphi | 2 | 08.07.2007 22:54 |