Сразу привожу код - http://jsfiddle.net/FPrp9/1/
#menu {
clear: both;
width: 980px;
margin: 135px auto;
background: url(../images/menu_background.png) no-repeat;
padding: 3px 0 4px 0;
}
#menu > ul {
height: 24px;
}
#menu > ul li {
float: left;
padding: 0 95px 0 64px;
background: url(../images/menu_decor.png) no-repeat right center;
position: relative;
}
#menu > ul .last_child {
background: none;
padding-right: 30px;
}
#menu > ul li:first-child {
padding-left: 30px;
}
#menu ul li a {
font: 20px BookAntiqua;
color: #000;
text-transform: uppercase;
}
#menu ul li a:hover {
text-shadow: 0 0 0;
}
#menu ul li ul {
position: absolute;
background: url(../images/menu_background_hover.png) no-repeat right center;
top: 43px;
left: 35px;
z-index: 3;
display: none;
}
#menu ul li ul li {
background: none;
padding: 0;
float: none;
}
#menu ul li ul li:first-child {
padding: 0;
}
#menu ul li ul li a {
font-size: 16px;
}
#menu ul li a:hover ul {
display: block;
}
<div id="menu">
<ul>
<li><a href="index.php">Главная</a>
</li>
<li><a href="about.php">О кафе</a>
</li>
<li><a href="menu.php">Меню</a>
<ul>
<li><a href="menu.php?kitchen=europe">Европейская</a>
</li>
<li><a href="menu.php?kitchen=japan">Японская</a>
</li>
</ul>
</li>
<li class="last_child"><a href="contacts.php">Контакты</a>
</li>
</ul>
</div>
Проблема в том, что при наведении на ссылку "Меню", должно появляться подменю, но оно появляется, только если его показ применить не к a
, а к li
(см. последнее CSS-правило). Помогите, пожалуйста, в чем может быть проблема?