我已经尝试了所有东西,但我坚持这个。我希望在悬停ul li时显示ul ul li。谁能看到我需要做什么?我认为我对ul和li的声明做错了,但如果这是唯一的问题,我不会感到害羞。
顺便说一下:它是一个垂直菜单/列表
HTML:
<!--::::: SIDEBAR :::::-->
<div class="sidebar"> <!-- sidebar starts-->
<!-- menu starts-->
<div id="menu_nav">
<ul class="main">
<li class="selected"><a class="selected" href="#featured_work1">Wat is D-day</a></li>
<li><a href="#featured_work1">Waarom een invasie</a></li>
<li class="sub"><a href="#featured_work2">Het doel</a></li>
<ul >
<li><a href="#featured_work2">test1</a></li>
<li><a href="#featured_work2">test2</a></li>
<li><a href="#featured_work2">test3</a></li>
</ul>
<li><a href="#featured_work1">Operation Fortitude</a></li>
<li><a href="#featured_work2">Landingsplaats</a></li>
<li><a href="#featured_work1">Atlantische muur</a></li>
<li><a href="#featured_work2">Organisatie Todt</a></li>
<li><a href="#featured_work1">Batterijen</a></li>
<li><a href="#featured_work1">Luchtlandingen</a></li>
<li><a href="#featured_work2">Amfibische landingen</a></li>
<li><a href="#featured_work1">Tijdlijn</a></li>
<li><a href="#featured_work2">Na D-day</a></li>
<li><a href="#featured_work1">Cijfers</a></li>
<li><a href="#featured_work1">De Facties</a></li>
<li><a href="#featured_work1">Materiaal</a></li>
<li class="last"><a href="#featured_work2">Kaarten</a></li>
</ul>
</div><!-- menu ends -->
CSS:
/* A) SIDEBAR MENU ++++++++++++++++++++++++++++++++++++++++++++ */
#menu_nav { }
#menu_nav ul li { display: block; border-bottom: 1px dashed #555; }
#menu_nav ul ul li { display: block; border-bottom: 0px dashed #555; }
#menu_nav ul ul li a {
display: none;
border-bottom: 0px dashed #555;
padding: 7px 0 0px 58px;
font-size: 12px;
margin-top: -4px;
background: url(style/images/forward_light2.png) no-repeat;
background-position: 38px 7px;
color: #000;
text-align: left;
text-shadow: none;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease; }
#menu_nav ul li.sub a:hover ul { display: block; }
#menu_nav ul li a {
display: block;
padding: 7px 0 11px 40px;
font-size: 14px;
margin-top: 3px;
color: #9b2929;
text-align: left;
text-shadow: none;
background: url(style/images/arrow-right.png) no-repeat;
background-position: 0px 7px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease; }
#menu_nav ul li.last { border-bottom: 0 solid #444; padding-bottom:10px; }
#menu_nav ul li a.selected {
display: block;
padding: 7px 0 11px 40px;
font-size: 14px;
color:#252525;
text-align: left;
text-shadow: none;
background: url(style/images/arrow-right-red.png) no-repeat;
background-position: 0px 7px;
}
#menu_nav ul li a:hover {
padding: 7px 0 11px 45px;
-moz-opacity: 0.85;
-ms-filter:progid: DXImageTransform.Microsoft.Alpha(Opacity=85);
filter: alpha(opacity=85);
opacity: 0.85;
-khtml-opacity: 0.85;
text-decoration: none; }
#menu_nav ul ul li a:hover{
padding: 7px 0 0px 62px;
text-decoration: none; }
答案 0 :(得分:0)
你有很多复杂的后代选择器,我认为这是你的问题。
首先,在display: none
之后删除#menu_nav ul ul li a
行。
然后将这些声明添加到CSS:
li.sub ul {
display: none;
}
li.sub:hover ul {
display: block;
}
然后,在您的HTML中,更改以下行:
<li class="sub"><a href="#featured_work2">Het doel</a></li>
<ul >
<li><a href="#featured_work2">test1</a></li>
<li><a href="#featured_work2">test2</a></li>
<li><a href="#featured_work2">test3</a></li>
</ul>
以下内容:
<li class="sub"><a href="#featured_work2">Het doel</a>
<ul >
<li><a href="#featured_work2">test1</a></li>
<li><a href="#featured_work2">test2</a></li>
<li><a href="#featured_work2">test3</a></li>
</ul></li>
换句话说,将<ul>
放在 <li class="sub">
内。
这对我在Chrome 25中有用。这就是你想要的吗?
<强>转换
您在此方案中可以执行的转换类型受到限制。 CSS转换不适用于display
规则,除非您使用精确尺寸,否则它们将无法在height
上使用(因此从height: 0
切换到height: auto
不会设置动画)。使用精确的高度非常棘手,如果您更改了内容,它会立即中断。所以你有两个选择:对<ul>
的不透明度(淡入效果)执行不太完美的过渡,或者使用jQuery为打开JavaScript的访问者添加下滑效果。< / p>
如果您将CSS更改为:
li.sub ul {
height: 0px;
overflow: hidden;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
li.sub:hover ul {
opacity: 1;
height: auto;
}
ul
的空间将“弹出”进入视图,然后内容将淡入。
或者,您可以使用jQuery添加slideDown效果:
$(document).ready(function() {
$('.sub').hover(function() {
$(this).find('ul').show();
}, function() {
$(this).find('ul').hide();
});
});
然后将CSS规则更改为:
li.sub ul.sub-menu {
display: none;
}
(不再需要:悬停规则。)这可能看起来更优雅。如果您选择此路线,请确保为未启用JavaScript的访问者“取消”display:none;
规则“创建后备广告,否则他们将看不到任何内容!