У меня есть простой список UL, когда вы наводите курсор на элемент списка More
в HTML ниже, он отображает его дочернее меню и показывает его.
Что мне нужно сделать, это изменить CSS фактического CSS More
после того, как дочернее меню будет отображаться и зависеть.
Итак, если вы наведите курсор мыши на More
, появится детское меню, затем вы наведите курсор мыши на это дочернее меню. На этом этапе мне нужно изменить CSS родителя этого дочернего меню, которое будет в меню с More
как текст.
Если вы знаете, как это сделать без Javascript, я бы с удовольствием узнал.. Может быть, это невозможно даже без JS?
<div id="nav-wrapper">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">More</a>
<ul>
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
<li><a href="">Sub Link 3</a></li>
<li><a href="">Sub Link 4</a></li>
<li><a href="">Sub Link 5</a></li>
</ul>
</li>
</ul>
</div>
CSS
<style type="text/css" media="screen">
#nav-wrapper ul {
position:relative;
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display: inline;
margin: 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
line-height: 45px;
font-size: 13px;
color: #666;
padding: 5px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul{
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
display: block;
margin:-10px 0 0 0;
padding:0px 20px 20px 20px;
border-color:#fff;
border:1px;
border-style:solid;
background:#FFF;
position:absolute;
top:45px;
right: 320px;
width: 420px;
}
</style>