Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.01.2015, 14:12   #1
fil667
Новичок
Джуниор
 
Регистрация: 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>
вот css
Код 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;
}
Изображения
Тип файла: jpg Безымянный.jpg (8.2 Кб, 145 просмотров)
fil667 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите с меню на паскале 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