|
Сообщение от seoguru
|
|
Хотелось бы чтобы когда дочерние пункты активны, то и родительский пункт оставался подсвеченным.
|
Тогда нужно выбирать "правильного" родителя!
Как вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#menu {
padding: 0;
margin: 0;
font-size: 100%;
}
#menu li {
list-style: none;
float: left;
height: 84px;
padding: 0;
margin: 0 0 0 10px;
width: 206px;
text-align: center;
background: #78c2e6;
position: relative;
}
#menu li:hover {
background: #91c46d;
}
#menu li a {
display: table-cell;
width: 206px;
height: 84px;
color: #212121;
text-decoration: none;
text-transform:uppercase;
text-align:center;
vertical-align:middle;
font-size: 16px;
}
#menu li:hover a {
color: #fff;
}
#menu li span {
position: relative;
display: block;
text-align: center;
vertical-align:middle;
text-decoration: none;
text-transform:none;
font-size: 13px;
}
#menu li ul {
list-style: none;
padding: 10px 0 0 0;
margin: 0;
width: 206px;
display: none;
position: absolute;
left: 0;
top: 84px;
}
#menu li ul li {
float: none;
width: 206px;
height: 44px;
margin: 0;
text-align: center;
background: #91c46d;
}
#menu li ul li:hover {
background: #6ab636;
}
#menu li ul li a {
display: table-cell;
width: 206px;
height: 44px;
color: #fff;
text-decoration: none;
text-transform: none;
text-align:center;
vertical-align:middle;
font-size: 16px;
}
#menu li:hover ul {
display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id="menu">
<li>
<a href="#">About us<span>Learn more about BestHost</span></a>
<ul>
<li><a href="#">Our team</a></li>
<li><a href="#">Our datacenter</a></li>
<li><a href="#">Our Blog</a></li>
</ul>
</li>
</ul>
</body>
</html>