Закругление углов в меню.

[trojanets]

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

В общем регил написать свой сайт с меню, вчера прочитал этот сайт все очень даже понятно.

суть li (отступ) + а(сам линк) + span(как уголок), понятно как сделать, и с фотошопом дружу...

Но вот задача как выделять все сразу при наведении на а ?

в css же нельзя писать условия, а нужно типа:

(си)

if (a.hover) {

li.hover=true

span.hover=true)

}

это 1е, второй побочный эфект, чтобы пользователь не мог навести на span и li, но тут задача сложнее, так как свойства li:active и span:active

задействованы под изменения картинки, то условия типа:

if (li.hover & !a.hover) { li.ahover=false}

if (span.hover & !a.hover) { span.hover=false}

и 3е хочу чтобы уголок выдвигался, следовательно span:active должен быть z-index более высокий чем span, но не работает.

Полный текст моих мучений:

template.html

<div id="menu_background">

<div class="menu">

<ul>

<li><a href="#">Главная </a><span>     </span></li>

<li><a href="#">О компании</a><span>     </span></li>

<li><a href="#">Новости</a><span>     </span></li>

<li><a href="#">Разработки</a><span>     </span></li>

</ul>

</div>

</div>

template.css

#menu_background {

background: #53afcd;

position:relative;

float:left;

left:10px;

top:0px;

width:1240px;

height: 26px;

border-width:thin;

border-color:black;

border-style:solid;

z-index:1;

}

.menu {

background: #53afcd;

position:relative;

float:left;

left:0px;

margin: 1px 1px 1px 1px;

height: 25px;

font-family: "Times New Roman", Times, serif;

font-size: 14x;

font-variant:small-caps;

z-index:2;

}

.menu ul li {

display: block; /* Pereopredelyaem * pered punctom*/;

background:url('menu_l.gif') no-repeat;

position: relative;

float: left;

left: -40px;

top: -16px;

height: 21px;

margin: 1px -15px 1px 5px;

z-index: 2;

padding: 0px 0px 0px 5px;

/*border-width:thin;

border-color:red;

border-style:solid;*/

}

.menu ul li a {

text-decoration: none;

background: url('menu_t.gif');

position: relative;

float: left;

left: 0px;

margin: 0px 0px 0px 0px;

height:21px;

z-index: 2;

}

.menu ul li span {

text-decoration: none;

background: url('menu_r.gif') top left no-repeat;

position: relative;

float: left;

left: 0px;

height:21px;

margin: 0px 0px 0px 0px;

z-index: 2;

/*border:0px;*/

}

.menu ul li:hover {

display: block; /* Pereopredelyaem * pered punctom*/;

background: url('menu_active_t.gif') repeat-x;

position: relative;

float: left;

left: -40px;

top: -16px;

height: 21px;

margin: 1px -15px 1px 5px;

z-index: 2;

padding: 0px 0px 0px 5px;

}

;

background: url('menu_active_t.gif') repeat-x;

position: relative;

float: left;

left: -40px;

top: -16px;

height: 21px;

margin: 1px -15px 1px 5px;

z-index: 2;

padding: 0px 0px 0px 5px;

}

.menu ul li a:hover {

text-decoration: none;

background: url('menu_active_t.gif') repeat-x;

position: relative;

float: left;

left: 0px;

margin: 0px 0px 0px 0px;

height:21px;

z-index: 2;

color: #FFFFFF;

font-family: "Times New Roman", Times, serif;

font-size: 14x;

font-variant:small-caps;

.menu.ul.li.span:hover {background: url('menu_active_t.gif') no-repeat;}

}

.menu ul li span:hover {

text-decoration: none;

background: url('menu_active_r.gif') no-repeat;

position: relative;

float: left;

left: 0px;

height:21px;

margin: 0px 0px 0px 0px;

z-index: 2;

/*border:0px;*/

}

схемотично нарисую, не знаю как сюда картинки прикрепить:

Просто

——-- ——————— \

| \

| \

| Это Li Это A \ Это span

| \

|——- ———————- ——-\

так что внутри фон 1 снаружи как menu_background

таких картинок 5

это не выделенные, тоесть внутри светлый фон снаружи как menu_background

4я это 1н столбец цвета рамки, так как именно им со свойством repeat-x мы заполняем li:hover и a:hover.

5я это уголок в котором внутри закрашено а снаружи цвет фона.

Так помогите решить вопрос, может я что не дочитал про CSS ?