Вернуться   Дизайнерский форум » РАЗНОЕ » Кальянная

Декорация подменю CSS3

Обсуждение темы Декорация подменю CSS3 в разделе Кальянная, часть категории РАЗНОЕ; Проблема вот в чем, есть меню и есть подменю, при наведении на элемент подменю вызывается бэкграунд колор, но распределяется не так, как хотелось ...


Закрытая тема
 
Опции темы
Старый 14.03.2012, 09:13   #1
Проблема вот в чем, есть меню и есть подменю, при наведении на элемент подменю вызывается бэкграунд колор, но распределяется не так, как хотелось бы, а именно относительно текста. вот пример (см. вложения) (1 рисунок как хотелось бы, второй как есть..)

говоря примитивным языком - голубая обводка в подменю становится размером с самую максимальную строку...

код меню:
Код:
<nav>
	<ul id="topnav">
		<li><a href="#asd" title="ООО ЛексЛайн">ГЛАВНАЯ</a>
        <li><a href="#asd" title="вступить в СРО">ВСТУПИТЬ В СРО</a>
<span>
            <a href="#">СРО СТРОИТЕЛЕЙ</a> 
            <a href="#">СРО ПРОЕКТИРОВАНИЯ</a> 
        </span>
код css
Код:
nav ul li {float:left;}
nav li {margin-right:40px;}

nav a {color:#000; text-decoration:none; padding:7px 10px 5px 10px;}
nav a:hover {
	background-color:#0d9ce0;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	display: block;
}
ul#topnav {list-style: none; }
ul#topnav li:hover span { display: block; }
ul#topnav li span {float: left; position: absolute; display: none;}
ul#topnav li span a:hover {text-decoration: none;}
ul#topnav li a {display: block; text-decoration: none;}
Изображения
Тип файла: jpg good.jpg (10.0 Кб, 3 просмотров)
Тип файла: jpg bad.jpg (8.9 Кб, 3 просмотров)

Последний раз редактировалось inc1uder; 14.03.2012 в 09:22..
 
Старый 14.03.2012, 09:13
Ссылки
Старый 14.03.2012, 14:36   #2
Вот вам код с вашим решением! Разбирайтесь:
Код HTML:
<!Doctype html>
<html>
<head>
<style>
nav ul li {float:left;}
nav li {margin-right:40px;}
nav a {color:#000; text-decoration:none; padding:7px 10px 5px 10px;}
nav span {padding:5px}
nav a span:hover {background-color:#0d9ce0;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px; }

ul#topnav {list-style: none; }
ul#topnav li:hover div { display: block; }
ul#topnav li div {float: left; position: absolute; display: none;}
ul#topnav li div a:hover {text-decoration: none;}
ul#topnav li a {display: block; text-decoration: none;}
</style>
</head>
<body>

<nav>
	<ul id="topnav">
		<li><a href="#asd" title="ООО ЛексЛайн"><span>ГЛАВНАЯ</span></a>
        <li><a href="#asd" title="вступить в СРО"><span>ВСТУПИТЬ В СРО</span></a>
<div>
            <a href="#"><span>СРО СТРОИТЕЛЕЙ</span></a> 
            <a href="#"><span>СРО ПРОЕКТИРОВАНИЯ</span></a> 
        </div>
</nav>
</body>
</html>
 
Старый 15.03.2012, 08:24   #3
maxefect, вы как всегда выручили)
 
Старый 15.03.2012, 08:24
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сверстать треугольник в подменю neverchik HTML, CSS, JavaScript 7 20.11.2015 12:56
Как сделать "замедленную реакцию" при наведении на блок в css3? Владимир2 HTML, CSS, JavaScript 3 20.07.2014 06:29
вкладки с помощью CSS3 и Jquery maxefect HTML, CSS, JavaScript 4 16.11.2011 23:46


Текущее время: 01:24. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум