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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 15.06.2014, 17:33   #1
Monkeycoder
Новичок
Джуниор
 
Аватар для Monkeycoder
 
Регистрация: 15.06.2014
Сообщений: 1
По умолчанию Вертикальное выпадающее меню при помощи CSS

Доброго времени суток, уважаемые форумчане! Столкнулся с одной проблемой: не могу грамотно создать вертикальное выпадающее меню (см. прикрепленную картинку), даже с костылями и то не получается, помогите, пожалуйста.

Код в файле index.html:

Код HTML:
<!DOCTYPE html>
<html lang="ru" dir="ltr" id="html">
    <head>
    <meta charset="utf-8">
    <title>VNA | Главная</title>
     
    <link rel="stylesheet" href="css/new_elements.css">
    <link rel="stylesheet" href="css/style.css">
     
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('article');
        document.createElement('footer');
    </script>
    </head>
    <body>
        <header>
            <a href="index.html">
                <img src="img/logo.png" alt="VNA.BY_logo">
            </a>
             
            <nav>
                <ul>
                    <li>   
                        <a href="#">
                            О нас
                        </a>   
                    </li>
                     
                    <li>
                        <a href="#">Товары и услуги</a>
                            <ul>
                                <li><a href=#>Submenu 1</a></li>
                                <li><a href=#>Submenu 2</a></li>
                                <li><a href=#>Submenu 3</a></li>
                            </ul>
                    </li>
                     
                    <li>
                        <a href="#">
                            Главная
                        </a>
                    </li>
                </ul>
            </nav>
        </header>           
             
        <article>
            <h2>Подул ветер перемен</h2>
        </article>
         
    </body>
</html> 
Код в файле new_elements.css (Прошу прощения, но я не нашел тут тега для подсвечивания css-кода, поэтому вставлю в html):

Код HTML:
header, nav, footer, article {
    display: block;
}
 
footer {
    clear: both;
}
Код в файле style.css:

Код HTML:
* {
  padding: 0;
  margin: 0;
}
 
body {
    background-color: #dadbdb;
}
 
header {
    background-color: #6e91c1;
    overflow: hidden;
}
 
header a img {
    border: none;
}
 
header nav {
    float: right;
    min-width: 900px;
    width: auto;
}
 
header nav ul {
    list-style: none;
}
 
header nav ul li {   
    float: right;
    padding:2% 5%;
}
 
header nav ul li:hover {
    background-color:#607FA9;
}
 
header nav ul li a {
    text-decoration: none;
    font-family: Arial;
    color: #ffffff;
    font-size: 2.6em;
}
 
/* скрываем вложенные пункты меню */
 
nav ul li ul {
    visibility: hidden;
    position: absolute;
    left: 149px;
    top: 200px;
}
 
/* отображаем вложенное меню при наведении мыши */
 
nav ul li ul li:hover {
   position: absolute;
}
 
nav ul li:hover ul {
   visibility: visible;
}
 
/* выделяем родительские пункты, при наведении на дочерние */
 
nav ul li ul li:hover a {
   color:#4682B4;
   background:#FAFAD2;
}
P.S. Задали сверстать "резиновый" макет. С горем пополам с частью шапки я справился. но оказалось, что меню должно быть еще выпадающим на втором пункте, как на примере. Тут я потерпел фиаско. Заранее спасибо, что уделили свое свободное время решению или просмотру моей проблемы.
Изображения
Тип файла: jpg example.jpg (43.0 Кб, 117 просмотров)
Monkeycoder вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вертикальное выпадающее меню (DLE) megostudent HTML и CSS 3 15.12.2012 20:28
Выпадающее меню CSS+HTML Mat-eria HTML и CSS 0 17.11.2011 17:29
Выпадающее горизонтальное меню на css st_sasha HTML и CSS 1 20.10.2011 16:26
Css-меню вертикальное выпадающее и раскрывающееся при выборе Landysh86 HTML и CSS 3 04.05.2011 13:25
выпадающее вертикальное меню ehoolu HTML и CSS 0 29.09.2010 01:47