Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Корзина » Выпадающее меню
Мне нужна помощь. не могу разобраться я с этотими кодами, хоть убейте.
Нужно вот такое меню
(которое на шапке)
Прошу меня не посылать в темы с кодом этого меню, я уже сто раз его перечитала и ничего у меня не получается. Помогите для этого форума http://fatariya.ru/ сделать меню.
хотелось бы чтобы оно было наверху. (в самом) вот в таком виде.
фон выпадающего меню вот такое
И обьясните как блондинке, как "развлетвлять ссылки".
Отредактировано Swetynasty (Вт, 23 Авг 2011 16:45:24)
вот что то типа того...
Swetynasty
Может уберете скрытый текст?)
Вам сделать его по клику или при наведении?
Вам сделать его по клику или при наведении?
думаю при наведении
Swetynasty
Здравствуйте.
Мне нужна помощь. не могу разобраться я с этотими кодами, хоть убейте.Нужно вот такое меню
<style type="text/css">
#menu-css {
margin: 0;
padding: 0;
}
#menu-css li {
display: inline-block;
padding: 0.5em;
margin: 1em 2% 1em auto;
width: 120px;
border: 1px solid #000;
background-color: #ffffcc;
text-align: center;
}
#menu-css li ul {
position: absolute;
margin-top: 5px;
margin-left: -6px;
z-index: 1000;
display: none;
width: 130px;
padding: 0 !important;
}
#menu-css li:hover ul {
display: block;
}
#menu-css li li {
display: block;
float: none;
width: 100%;
padding: 0.5em 0 ;
background-color: #ffffcc;
border-style: none;
margin: 0;
}
#menu-css li li:hover {
position: relative;
z-index: 1000;
background-color: #ffffcc;
}
</style>
<ul id="menu-css">
<li>
Один
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
Два
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
Три
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
Четыре
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
</ul>Цвета подберёте сами.
rps, эм... я хотела не цвета, а картинки.
Swetynasty
Ну впишите вместо слов
<img src="Адрес изображения" alt="image" />
Цвета везде поставьте transparent.
rps, ага вот попытка
Помогите выравнять значения, чтобы все ровно стояло и не переносилось на другую строчку.
Да и еще, как сделать фон выпадающего меню, картинкой?
я вот так сделала
background-image: url("http://forumupload.ru/uploads/000d/a3/05/53-1.jpg";)не реагирует.
Swetynasty
<style type="text/css">
#menu-css {
margin: 0;
padding: 0;
position: relative;
z-index: 1000;
width: 920px;
}
#menu-css li {
display: inline-block;
padding: 0;
margin: 1em -5px 1em 0;
border-style: none;
background-color: transparent;
text-align: center;
}
#menu-css li ul {
position: absolute;
z-index: 1000;
display: none;
width: 150px;
padding: 0 !important;
}
#menu-css li:hover ul {
display: block;
}
#menu-css li li {
display: block;
float: none;
width: 100%;
padding: 0.5em 0;
background-image: url(http://forumupload.ru/uploads/000d/a3/05/53-1.jpg);
border-style: none;
margin: 0;
}
#menu-css li li:hover {
position: relative;
z-index: 1000;
background-color: ;
}
</style>
<ul id="menu-css">
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/50-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/51-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/51-2.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-2.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-3.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
</ul>
<style type="text/css">
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 700; left: 500px; top: 250px
}
</style>
<style type="text/css">
#menu-css {
margin: 100;
padding: 100;
}
#menu-css li {
display: inline-block;
padding: 0.2em;
margin: 1em 2% 1em auto;
width: 110px;
border: 0px solid #000;
background-color: transparent;
text-align: center;
}
#menu-css li ul {
position: absolute;
background:#fff;
margin-top: 5px;
margin-left: -6px;
z-index: 1000;
display: none;
width: 130px;
padding: 0 !important;
}
#menu-css li:hover ul {
display: block;
}
#menu-css li li {
display: block;
float: none;
width: 100%;
padding: 0.5em 0 ;
background-image: url("http://forumupload.ru/uploads/000d/a3/05/53-1.jpg";)
border-style: none;
margin: 0;
}
#menu-css li li:hover {
position: relative;
z-index: 1000;
background-color: ;
}
</style>> Временно вставил > background:#fff;
rpsспасибо
Deff кривовото получилось. Они друг на друга ложилися..
Как цвет буков поменять??
И как сделать так чтобы главное меню(форум, участники...) не уезжало вниз
Как цвет буков поменять??
<style type="text/css">
#menu-css {
margin: 0;
padding: 0;
position: relative;
z-index: 1000;
width: 920px;
}
#menu-css li {
display: inline-block;
padding: 0;
margin: 1em -5px 1em 0;
border-style: none;
background-color: transparent;
text-align: center;
}
#menu-css li ul {
position: absolute;
z-index: 1000;
display: none;
width: 150px;
padding: 0 !important;
}
#menu-css li:hover ul {
display: block;
}
#menu-css li li {
display: block;
float: none;
width: 100%;
padding: 0.5em 0;
background-image: url(http://forumupload.ru/uploads/000d/a3/05/53-1.jpg);
border-style: none;
margin: 0;
color: #fff;
}
#menu-css li li:hover {
position: relative;
z-index: 1000;
background-color: ;
}
</style>
<ul id="menu-css">
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/50-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/51-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/51-2.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-1.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-2.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
<li>
<img src="http://forumupload.ru/uploads/000d/a3/05/52-3.jpg" alt="image" />
<ul>
<li>Подсказка 1</li>
<li>Подсказка 2</li>
<li>Подсказка 3</li>
<li>Подсказка 4</li>
<li>Подсказка 5</li>
<li>Подсказка 6</li>
</ul>
</li>
</ul>И как сделать так чтобы главное меню(форум, участники...) не уезжало вниз
Первое окно стиля:
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}#pun-title table {background-image : url(-);
border: none;
height: 450[px;
width: 100%;
}
Вместо выделенного поставьте меньшее значение. Например, 370.
| Выпадающее меню для форума | Архив | Пн, 26 Авг 2013 |
| Уменьшить размеры выпадающего меню и размеры панели навигации. | Архив | Ср, 15 Янв 2014 |
| Проблема с выпадающим меню. | Корзина | Пт, 11 Фев 2011 |
| Выпадающее меню | Корзина | Чт, 15 Апр 2010 |
| Выпадающее меню (моя версия) | Корзина | Ср, 26 Май 2010 |
Вы здесь » Единый форум поддержки » Корзина » Выпадающее меню