Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.58/12: Рейтинг темы: голосов - 12, средняя оценка - 4.58
Lapidos
0 / 0 / 1
Регистрация: 13.12.2012
Сообщений: 43
#1

Выпадающий список на css

21.05.2013, 21:25. Просмотров 2204. Ответов 4
Метки нет (Все метки)

Добрый день. Попробовал сделать выпадающий список с помощью css, получилось как на первой вложенной картинке, а хотелось как на второй. Подскажите, может кто нибудь знает как можно исправить?
0
Миниатюры
Выпадающий список на css   Выпадающий список на css  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.05.2013, 21:25
Ответы с готовыми решениями:

Выпадающий список на CSS
Скрипт взял с сайта , и хочу прикрутить чтобы сделать выпадающий список . Но...

Красивый выпадающий список на CSS
Всем привет! Задача простая, но я справиться не могу. Имеем такой пример: Нажми...

Выпадающий список в меню не выпадает(трабл с CSS)
нужно чтобы при наведении мышкой на Share выпадал #d0 идентификаторов много...

В IE, кастомный выпадающий список: не выпадает список, если не хватает места снизу
Только в IE. не работает кастомный выпадающий список, если недостаточно места...

Выпадающий список
Друзья, ниже приведен код выпадающего списка, все с ним нормально, но мне кое...

4
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,803
Записей в блоге: 2
21.05.2013, 21:37 #2
Lapidos, код html и css давайте
0
Lapidos
0 / 0 / 1
Регистрация: 13.12.2012
Сообщений: 43
21.05.2013, 21:48  [ТС] #3
Код HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JewelleryYar - Главная</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<tr>
    <td><table class = "menu_border">
      <tr>
        <td class="droplink">
            <h3><a style="text-decoration:none; color:#f6e5c0" href="http://localhost/phpsite/index.php">Главная</a></h3>
        </td>
        <td class="droplink">
            <h3>Каталог</h3>
        </td>
        <td class="droplink">
            <h3>Инфо</h3>
            <ul>
                <li>Что такое?</li>
                <li>Легенды</li>
                <li>Блог</li>
                <li>F.A.Q.</li>
            </ul>
        </td>
        <td class="droplink">
            <h3>Помощь</h3>
        </td>
        <td class="droplink" style="border-right:none">
            <h3>Корзина</h3>
        </td>
      </tr>
    </table></td>
  </tr>
 
 
</body>
</html>
Код CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
body {background-image:url(img/background.jpg);} /* общий фон для страницы*/
 
@font-face {font-family: Lobster; /* имя шрифта для CSS правил */
url(fonts/Lobster.ttf); /* загружаем шрифт по указанному пути */
}
 
.menu_border {
border:#000000 1px solid; /* рамка для меню*/
background-color:#f6e5c0; /* фоновый цвет для меню*/
width:1000px;
height:50px;
}
 
/*Сбросим отступы*/
.droplink ul,.droplink h3,.droplink h3 a{
 padding:0;margin:0
}
/*Базовая обертка*/
.droplink {
font-family:Lobster;
color: #f6e5c0;
text-align:center;
font-size:35px;
text-shadow: 2px 0px 1px black, -2px 0px 1px black, 0px 2px 1px black, 0px -2px 1px black, 4px 4px 0.1em black;
width:200px;
height:30px;
background: #f6e5c0;
margin:10px 0 0 5px;
border-right:solid 1px #000000;
}
/*Стиль блока при наведении*/
.droplink:hover{
 height:auto;
 background-color:#3E403D;
}
/*Заголовок в обычном состоянии*/
.droplink h3 a{
 text-align:center;
 width:100%;
 display:block;
 padding:2px 0px;
 color:#999;
 text-decoration:none
}
/*Стиль для заголовка при наведении*/
.droplink:hover h3 a {
 color:#FFF;
 font-weight:bold;
}
/*Скрываем список без наведения*/
.droplink ul{
 list-style:none;
 display:none
}
/*Отображаем список при наведении*/
.droplink:hover ul{
 display:block;
 margin-top:1px
}
.droplink li{display:block}
/*Стиль элемента списка*/
.droplink li a{
 text-align:center;
 margin:1px;
 background-color:#484A47;
 display:block;
 color:#f6e5c0;
 text-decoration:none;
 font-size:25px;
 background-repeat:no-repeat;
 background-position: 10px 3px
}
/*Стиль элемента при наведении*/
.droplink li a:hover{
 background-color:#000000
}
0
BuPy7
Нет ТЗ - давай досвидания
741 / 371 / 64
Регистрация: 01.12.2011
Сообщений: 2,250
21.05.2013, 22:46 #4
Мда...В таком коде даже ковыраться не хочется...Кароче, чувак, у тебя вся проблема в том, что бы position: absolute; не указал. Т.е. то что у тебя отображается должно иметь этот стиль.
1
Lapidos
0 / 0 / 1
Регистрация: 13.12.2012
Сообщений: 43
22.05.2013, 00:22  [ТС] #5
BuPy7, Спасибо большое, разобрался)
0
22.05.2013, 00:22
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.05.2013, 00:22

Выпадающий список
Помогите сделать так, что бы пункт меню &quot;Рабочие программы&quot; был тоже выпадающим...

Выпадающий список
Помогите сделать так, чтобы пункт меню &quot;Рабочие программы&quot; тоже был выпадающим...

Выпадающий список
Всем привет, начал изучать html и jQuery в частности, пытаюсь отладить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru