evgenij2007
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Как сделать вот такой блок css? Скриншот: http://easycaptures.com/fs/uploaded/780/2449413460.png Чтобы вверху был одного цвета, а внизу другова цвета. Есть ли готовые примеры? Хотелось бы переделать вот этот код, чтобы выглядел как тот блок: Код: <html> <head> <!--<title>Горизонтальное выпадающее меню</title>*/ --> <meta charset="utf-8"> <!--<link rel="stylesheet" type="text/css" href="style2.css">--> <style type="text/css"> *{ margin: 0; padding: 0; } body { margin: 20px; } /*Горизонтальное выпадающее меню*/ ul.menu { margin: 0; padding: 0; display: inline-block; background-color: #15D458; background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1C9D49), to(#15D458)); background-image: -webkit-linear-gradient(#1C9D49, #15D458); background-image: -moz-linear-gradient(top, #1C9D49, #15D458); background-image: -ms-linear-gradient(#3C3, #15D458); background-image: -o-linear-gradient(#1C9D49, #15D458); background-image: linear-gradient(#1C9D49, #15D458); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C9D49', endColorstr='#15D458', GradientType=0); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; width: 900px; height: 45px; } ul.menu li { float: left; list-style: none; position: relative; } ul.menu li a { color: white; display: block; font-family: Arial; font-size: 13px; padding: 12px 20px 10px; text-decoration: none; } ul.menu li a:hover { background-color: #15D458; height: 45px; } ul.menu li:first-child a:hover { border-radius: 20px 0 0 20px; -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; height: 45px; } /*Выпадающее меню*/ ul.menu li ul { display: none; } ul.menu li:hover ul { display: block; position: absolute; top: 44px; left: -20px; border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; background-color: #15D458; z-index: 1000; padding: 12px 20px 10px; float: left; width: 300px; } ul.menu li:hover ul li { float: left; width: 50%; border-right: none; } ul.menu li:hover ul li:nth-child(odd) a { border-right: 0px solid #1C9D49; } ul.menu li:hover ul li a { border-top: 0px solid #1C9D49; border-right: none; padding: 12px 20px 10px; } ul.menu li:hover ul li a:hover { background-color: transparent; color: #c1deff; } ul.menu li:hover ul li:first-child a:hover { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } </style> </head> <body> <ul class="menu"> <li><a href="http://rsvet63.ru/new/">Главная</a></li> <li><a href="http://rsvet63.ru/new/">О нас</a> <!--<ul> <li><a href="">Производство</a></li> <li><a href="">Клиенты</a></li> <li><a href="">Для партнеров</a></li> <li><a href="">Для клиентов</a></li> <li><a href="">Реклама</a></li> <li><a href="">Производство</a></li> </ul> --> </li> <li><a href="">Объекты</a></li> <li><a href="">Информация</a></li> <li><a href="">Ипотека</a> <ul> <li><a href="">Калькулятор</a></li> </ul> </li> <li><a href="">Заявки</a> <ul> <li><a href="">Продажа</a></li> <li><a href="">Покупка</a></li> </ul> </li> </body> </html> | | Всего записей: 107 | Зарегистр. 04-09-2007 | Отправлено: 14:11 29-06-2014 | Исправлено: evgenij2007, 14:13 29-06-2014 |
|