День добрый, я тоже новенький в веб дизайне, но я когда-то был системным программистом, поэтому кой чего помню.... В общем регил написать свой сайт с меню, вчера прочитал этот сайт все очень даже понятно. суть 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 ?
