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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 09.12.2013, 09:51   #1
Glowworm
Пользователь
 
Аватар для Glowworm
 
Регистрация: 26.10.2011
Сообщений: 67
По умолчанию Меню горизонтальное

Код HTML:
<style>
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
 #pmenu {margin:0 0 auto 0; position:relative; z-index:500; width:900px; }
 #pmenu li {float:left;position:relative; }
 #pmenu a, #pmenu a:visited {display:block; width:111px; text-align:center; font-size:12px; color:#000; height:30px; line-height:29px; text-decoration:none; text-indent:5px; background:#c8d3ef; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#b1c1e8; color:#55708e;}
#pmenu li ul {display: none;}
    #pmenu li:hover > ul {display:block;  position:absolute; top:0; left:111px;}
#pmenu > li:hover > ul {left:0; top:24px;}
    
</style>
<div id="ii"> 
<ul id="pmenu">
<li><a href="$HOME_PAGE_LINK$">Главная</a></li>
<li><a href="http://gub-raion.ucoz.ru/index/0-2">О библиотеке</a>  
    <ul>
<li style="width:200px"><a href="#">Sub Level 1a</a></li>
<li><a href="#">Sub Level 1b</a></li>
<li><a href="#">Sub Level 1c ►</a>
	</ul>
    </li>
    
<li><a href="http://gub-raion.ucoz.ru/index/chitateljam/0-5">Читателям</a></li>
<li><a href="http://gub-raion.ucoz.ru/index/kraevedenie/0-22">Краеведение </a>
<ul>
<li><a href="#">Sub Level 1a</a></li>
<li><a href="#">Sub Level 1b</a></li>
<li><a href="#">Sub Level 1c ►</a>
<ul>
<li><a href="#">Sub Level 2a</a></li>
<li><a href="#">Sub Level 2b ►</a>
<ul>
<li><a href="#">Sub Level 3a</a></li>
<li><a href="#">Sub Level 3b ►</a>
<ul>
<li><a href="#">Sub Level 4a</a></li>
<li><a href="#">Sub Level 4b</a></li>
<li><a href="#">Sub Level 4c ►</a>
<ul>
<li><a href="#">Sub Level 5a</a></li>
<li><a href="#">Sub Level 5b</a></li>
<li><a href="#">Sub Level 5c</a></li>
<li><a href="#">Sub Level 5d ►</a>
<ul>
<li><a href="#">Sub Level 6a</a></li>
<li><a href="#">Sub Level 6b</a></li>
<li><a href="#">Sub Level 6c</a></li>
<li><a href="#">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 5e</a></li>
<li><a href="#">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 4d</a></li>
<li><a href="#">Sub Level 4e</a></li>
<li><a href="#">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 3c</a></li>
<li><a href="#">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#">Sub Level 1d</a></li>
<li><a href="#">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="http://gub-raion.ucoz.ru/index/kollegam/0-30">Коллегам</a></li>
<li><a href="http://gub-raion.ucoz.ru/index/detskaja_biblioteka/0-183">Детям</a></li>
<li><a href="#">Молодежи</a></li>
<li><a href="#">Слабовидящим</a></li>
</ul> 
 </div>
Подскажите, пожалуйста, как мне увеличить размер пунктов выпадающего меню? на картинке выделено розовым.
Изображения
Тип файла: jpg 5.jpg (9.0 Кб, 118 просмотров)
Glowworm вне форума Ответить с цитированием
Старый 09.12.2013, 12:12   #2
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

Все просто. у вас ссылка внутри li имеет четко заданную ширину, поэтому блок не раздвигается
Поэтому это:
Код:
#pmenu a, #pmenu a:visited {width: 111px;}
Поменять на вот это:
Код:
#pmenu a, #pmenu a:visited {min-width: 111px;}
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 10.01.2014, 20:55   #3
MixanMM
Форумчанин
 
Регистрация: 09.06.2009
Сообщений: 151
По умолчанию

Подскажите пожалвуйста, как сделать чтобы меню выпадало не "вниз" а "вверх" ?
Код:
/*Горизонтальное выпадающее меню*/
ul.menu {
	margin: 0;
	padding: 0;
	display: inline-block;
	background-color: #2b2b2b;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: linear-gradient(#4f4f4f, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0); 
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	width: 900px;
	
}

ul.menu li {
	float: left;
	list-style: none;
	border-right: 1px solid #4f4f4f;
	position: relative;
}

ul.menu li a {
	color: white;
	display: block;
	font-family: Arial;
	font-size: 13px;
	padding: 8px 20px 10px;
	text-decoration: none;
	border-right: 1px solid #2b2b2b;
}

ul.menu li a:hover {
	background-color: #2b2b2b;
}

ul.menu li:first-child a:hover {
	border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
}
/*Выпадающее меню*/
ul.menu li ul {
	display: none;
	position: absolute;
		z-index: 9999;
}

ul.menu li:hover ul {
	display: block;
	position: absolute;
	top: 34px;
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	background-color: #2b2b2b;
	z-index: 1000;
		position: absolute;
}

ul.menu li:hover ul li {
	float: none;
	width: 150px;
	border-right: none;
}

ul.menu li:hover ul li a {
	border-top: 1px solid #4f4f4f;
	border-right: none;
	padding: 6px 20px 8px;
}

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: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}	
#menu li a:hover, #menu #active a {color:#13c5ff}
MixanMM вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
горизонтальное меню из 3х элементов shilovec5377 JavaScript, Ajax 1 30.01.2012 19:51
Горизонтальное меню oтoбражение в ie IIuXTo HTML и CSS 5 07.05.2011 12:43
горизонтальное меню s.talke.r Паскаль, Turbo Pascal, PascalABC.NET 1 18.12.2010 17:12
Горизонтальное меню Brutallus Общие вопросы C/C++ 3 21.11.2009 21:07
Опера и IE. Горизонтальное меню. sun-pa HTML и CSS 2 28.02.2009 17:20