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

inc1uder · 14.03.2012, 09:13

Проблема вот в чем, есть меню и есть подменю, при наведении на элемент подменю вызывается бэкграунд колор, но распределяется не так, как хотелось бы, а именно относительно текста. вот пример (см. вложения) (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;}

maxefect · 14.03.2012, 14:36

Вот вам код с вашим решением! Разбирайтесь:

Код 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>

inc1uder · 15.03.2012, 08:24

maxefect, вы как всегда выручили)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Сверстать треугольник в подменю	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

15.03.2012, 08:24	#3
inc1uder	maxefect, вы как всегда выручили)

14.03.2012, 09:13
Ссылки