|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
06.10.2015, 23:12 | #1 |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
Помогите отредактировать меню
Помогите отредактировать горизонтальное выпадающее меню не как не получается сделать то что нужно ))
вот html : Код HTML:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Производство сендвич панелей пвх в СПБ </title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page-align" class="b3radius"> <div id="header"> <div id="header_nav"> <ul> <li class="headerList"><a href="#">Главная </a></li> <li class="headerList"><a href="#">Новости </a> <ul> <li><a href="#"> меню 1</a></li> <li><a href="#">Новый пункт меню 2</a></li> <li><a href="#">Новый пункт меню 3</a></li> </ul> </li> <li class="headerList"><a href="#"> Статьи </a></li> <li class="headerList"><a href="#">Халява </a></li> <li class="headerList"><a href="#">Сообщество</a></li> <li class="headerList"><a href="#"> Спорт </a></li> <li class="headerList"><a href="#"> Погода </a></li> </ul> </div> <div id="header_spase"></div> <div id="header_cont"> <div id="text_logo"> <h1>Завод<span style="color: #98ca60">Окон</span></h1> <span class="h1description"></br>Производство окон ПВХ</span> </div> </div> </div> <div id="sidebar" class="f_left"> </div> <div id="content" class="f_right"> </div> <div class="clr"></div> </div> </body> </html> вот CSS : * { margin: 0; padding: 0; } body { background: url(images/background.png); font: 16px Arial, Tahoma, sens-serif; } a { text-decoration: none; } h1 { font-size: 20px; color: #515151; } .f_left, #header_nav ul li, h1, #text_logo { float: left; } .f_right, { float: right; } .b3radius { border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; } .h1description { color: #9d9d9d; font-size: 15px; } #page-align{ width: 1000px; margin: 35px auto; box-shadow: 0px 1px 3px #dddddd; -webkit-box-shadow: 0px 1px 3px #dddddd; overflow: hidden; } #header { height: 280px; border-bottom: solid 3px #c7d4e1; } #header_spase{ height: 20px; border-bottom: solid 3px #c7d4e1; } #header_nav { height: 70px; border-bottom: solid 3px #c7d4e1; background: #fff; } #header_nav ul { padding:0; margin:0; list-style:none; position:relative; } #header_nav ul li{ display:block; line-height: 70px; } .headerList a{ border-right:solid #505e58 thin; } #header_nav ul li a{ display:block; padding-left:13px; padding-right:13px; color:#6f6f6f; text-decoration:none; } #header_nav ul li a:hover{ background: #98ca60; height: 70px; color:#fff; } #header_nav ul ul{ position:absolute; top:70px; background: rgba(152, 202, 96, 0.68); border:thin solid #849c92; display:none; } #header_nav ul li:hover ul{ position:absolute; left:0; display:block; } #header_nav ul ul li a{ border:none; color:#6f6f6f; } #text_logo { color: #515151; margin-left: 20px; margin-top: 40px; } .header_text { color: #515151; } .header_text span { font-size: 10px; color: #b6b6b6; } #header_cont { height: 60px; } #sidebar { width: 195px; height: 400px; border-right: solid 3px #98ca60; background: #e7e7e7; } #content { width: 800px; height: 400px; } .clr { clear: both; } хочу что бы выпадающий список отображался не горизонтально а вертикально и при наведении на выпадающий список цвет активной родительской ссылки не менялся на белый...вообще в идеале хочу вот такое получить меню как на этом сайте http://veka-spb.ru/ Последний раз редактировалось Вадим Мошев; 07.10.2015 в 09:27. |
06.10.2015, 23:13 | #2 |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
А вот ссылка на менюшку которую пытаюсь отредактировать http://oknaspb.esy.es/
|
08.10.2015, 10:14 | #3 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Примерно так...
Код HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> ul { text-align:left; display:inline; margin:0; padding:10px 0; list-style:none; } ul li { font:15px/18px sans-serif; display:inline-block; margin-right:-4px; position:relative; padding:15px 20px; background:#fff; cursor:pointer; } ul li:hover { background:#98ca60; color:#fff; } ul li ul { padding:0; position:absolute; top:48px; left:0; width:150px; box-shadow:none; display:none; opacity:0; visibility:hidden; } ul li ul li { background:#B9DB93; display:block; color:#444; } ul li ul li:hover {background:#98ca60;} ul li:hover ul { display:block; opacity:1; visibility:visible; } .menu {text-align:center;} </style> </head> <body> <div class="menu"> <ul> <li>Home</li> <li>Portfolio <ul> <li>Web Design</li> <li>Web Development</li> <li>Illustrations</li> </ul> </li> <li>Blog <ul> <li>Строка 1<br>Строка 2</li> <li>Некий подпункт</li> </ul> </li> <li>Contact</li> <li>About</li> </ul> </div> </body> </html> |
08.10.2015, 17:36 | #4 |
Новичок
Джуниор
Регистрация: 14.09.2015
Сообщений: 1
|
Чтобы выстроить пункты по вертикали - перезадайте float: none; элементам вложенного списка.
Сделать слайдер можно на css/js, а можно на чистом кошерном css3 по данному примеру: http://codepen.io/ac1714/pen/AvnHf/ |
08.10.2015, 20:42 | #5 | |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
Цитата:
|
|
08.10.2015, 20:47 | #6 | |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
Цитата:
|
|
08.10.2015, 20:53 | #7 |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
Если кто знает решение проблемы напишите пожалуйста! а то надоело это "гадание на кофейной гущще"
|
08.10.2015, 21:14 | #8 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Основы HTML/CSS
>>> как это применить в отдельном css файле??
Не совсем понятно.... CSS находится между тегами <style> Я привёл готовый пример работающего HTML-файла. Скопировать и пользоваться. Если копировать влом, то результат смотрим здесь http://jsfiddle.net/obqmxg2m/ Последний раз редактировалось SQLPowerUser; 08.10.2015 в 21:28. |
08.10.2015, 22:18 | #9 | |
Новичок
Джуниор
Регистрация: 06.10.2015
Сообщений: 9
|
Цитата:
вот который <link href="style.css" rel="stylesheet" type="text/css" /> |
|
08.10.2015, 22:55 | #10 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Текст, который между тегами <style>, копируем в отдельный CSS-файл.
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Задача на С++ помогите отредактировать | STIFFmaster_LP | Помощь студентам | 2 | 24.10.2009 20:08 |
Помогите отредактировать текст | Chev | Помощь студентам | 10 | 15.10.2009 09:01 |
помогите отредактировать | worshewitin | Помощь студентам | 1 | 23.06.2009 10:52 |
Помогите пожалоста отредактировать программу | girkoff | Общие вопросы C/C++ | 4 | 31.03.2009 04:01 |
помогите отредактировать прогу | finch | Помощь студентам | 3 | 25.06.2007 07:42 |