Всем привет.

Давно я не писал в блог, поэтому я приготовил большой и классный материал который многим пригодится.
Сегодня я покажу вам как сделать меню с прозрачностью и скругленными углами, работающее во всех браузерах без картинок и других костылей.
Недавно меня напряг заказчик, потребовав всю эту красоту. Я прошерстил множество сайтов, блогов и форумов. Перепробовал десятки инструкций от простых до требовавших серьезных танцев с бубном, сейчас я предлагаю вам готовое решение не требующее картинок и прочих извращений. В конце статьи рабочий пример.
Вот код.

<script type="text/javascript">
$(document).ready(function() {
   $('.parent').hover(	//обработчик срабатывает при наведении мыши
//на пункты меню у которых есть подменю (они выделены в класс "parent")
	function () {
		//добавляем класс parenthover
		$(this).addClass('parenthover');
		//отображаем дочерний элемент div в котором находится подменю
		$(this).children('div').show();
		},
		//отменяем сделанное предыдущей функцией когда не выполняется
//условие $('.parent').hover
	function () {
		$(this).children('div').hide();
		$(this).removeClass("parenthover");
		})
  });
</script>

Далее идет непосредственно меню.

<!--div в котором лежит меню имеет свойство position:absolute,
  это не обязательно, просто, так проще показать прозрачность-->
<div style="position: absolute;">
<ul id="topnav">
	<li><a style="color: #0d719b;" href="/">
Главная</a></li>
<!--небольшая подстраховка, чтобы между пунктами меню был промежуток,
 даже если отвалятся стили-->
	<li><a href="/">
Ссылка 1</a></li>
<!--класс элементов у которых есть подменю-->
	<li class="parent">
<div class="line"></div>
<!--класс подменю с прозрачностью и скругленными углами-->
<div class="trans"><a href="/">Раздел 1</a>
<a href="/">Раздел 2</a>
<a href="/">Раздел 3</a>
<a href="/">Раздел 4</a></div>
<a href="/">Ссылка 2<img src="arr.png" alt="" /></a></li>
	<li class="parent">
<div class="line"></div>
<div class="trans">
<a href="/">Раздел 5</a>
<a href="/">Раздел 6</a>
<a href="/">Раздел 7</a></div>
<a href="/">Ссылка 3<img src="arr.png" alt="" /></a></li>
</ul>
</div>
<!--еще один див исключительно для демонстрации прозрачности-->
<div style="background: none repeat scroll 0% 0% #5a7;
 width: 500px; height: 50px; margin-top: 150px; position: absolute;"></div>

С кодом я надеюсь все понятно, перейдем к css.

ul#topnav {
padding: 0;
width: 640px;
list-style: none;
position: absolute;
font-size: 100%;
text-align:left;
float: right;
margin: 30px 270px;
}

ul#topnav li {
float: left;
margin: 0;
padding: 0;
display: list-item;
z-index:999;
position:relative;
}

.parent{
height: 30px;
}

ul#topnav a {
padding: 7px;
display: block;
text-decoration: none;
color:#000;
position:relative;
z-index:999;
}

ul#topnav a:hover {
color:#0D719B;
}

.parenthover{
color:#0D719B;
text-decoration: none;
display: list-item;
z-index:999;
background: #fff;
border-left:2px solid #bbb;
border-right:2px solid #bbb;
border-top:2px solid #bbb;

/*--top right rounded corner--*/
-moz-border-radius-topright: 6px;
-khtml-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
/*--top left rounded corner--*/
-moz-border-radius-topleft: 6px;
-khtml-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
behavior: url(ie-css3.htc);
}

.trans{ 		/*прозрачный класс*/
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;

/*закругляем углы*/
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
behavior: url(ie-css3.htc);

/*--выпрямляем левый верхний угол--*/
-moz-border-radius-topleft: 0;
-khtml-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
}

ul#topnav  div{ /*свойства блока подменю*/
float: left;
padding: 0;
margin: 0;
position: absolute;
left: -2px; top:30px;
display: none;
width: 259px;
clear: both;
background: #fff;
color: #000;
border:2px solid #bbb;
z-index:-1;
}

/*стиль ссылок в подменю*/
ul#topnav li div a{
font-style: normal;
border-bottom: 1px solid #ccc;
/*font-size: 120%;*/
}

/* стиль ссылок в подменю при наведении*/
ul#topnav li.parent div a:hover{
color: #0D719B;
font-weight: bold;
}

#topnav li .line{
display:none;
margin-top:0;
margin-left:2px;
position:absolute;
border:0;
background: #fff;
height:2px;
width:100%;
color:#f00;
z-index:5;
}

Пример

.