我已经尝试了所有东西,但似乎无法让下拉淡入。是否有可能淡入.submenu使用CSS?我不知道为什么它不能正常使用"过渡" CSS。以下是http://jsfiddle.net/aAXwr/
<ul id="main-menu">
<li><a href="<txp:site_url />" style="background-image:none;">Home</a></li>
<li><a href="<txp:site_url />about">About</a>
<ul class="sub-menu">
<li><a href="<txp:site_url />">About Us</a></li>
<li><a href="<txp:site_url />">Our journey</a></li>
<li><a href="<txp:site_url />">Our partnerships</a></li>
<li><a href="<txp:site_url />">Our values</a></li>
</ul>
</li>
<li><a href="<txp:site_url />switching">Switching</a>
<ul class="sub-menu">
<txp:article_custom form="menu_listing" pgonly="0" section="switching" sort="Posted asc" />
</ul>
</li>
</ul>
这是我的CSS
#main-menu {
float: left;
font-size: 0;
margin: 15px 0;
}
#main-menu > li {
display: inline-block;
}
#main-menu > li > a {
color: #eee;
font-size: 18px;
line-height: 14px;
background:url('http://plymouthenergycommunity.org.uk.s171938.gridserver.com/images/12.jpg') no-repeat top left;
padding-left: 15px;
height:40px;
display:block;
padding-right:2px;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #ffb612;
}
#main-menu li {
position: relative;
z-index:7000;
}
ul.sub-menu {
background:#fff;
display:none;
height:auto;
color:#000;
margin:0px;
border:0px;
position:absolute;
width:150px;
z-index:200;
-moz-box-shadow: 2px 2px 5px 2px #000;
-webkit-box-shadow: 2px 2px 5px 2px #000;
box-shadow: 2px 2px 5px 2px #000;
/*top:1em;
/*left:0;*/
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
color: #29225c;
display: block;
font-size: 16px;
line-height: 16px;
padding-left:10px;
}
ul.sub-menu > li > a:hover {
color: #000;
}
ul.sub-menu > li:first-child {
padding-top:10px;
}
ul.sub-menu ul.sub-menu > li:first-child {
}
ul.sub-menu > li:last-child > a {
padding-bottom:10px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
答案 0 :(得分:2)
您可以使用opacity
代替display
:
ul.sub-menu {
display:block;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#main-menu li:hover > ul.sub-menu {
opacity: 1;
}
答案 1 :(得分:1)
你想要过渡。人们为过渡做的主要错误是使用display
属性,这不能用于过渡。
试试这个:
ul.sub-menu
{
display:block;
visibility: hidden;
opacity: 0;
transition-property(opacity);
transition-duration(0.8s);
}
#main-menu li:hover > ul.sub-men
{
opacity: 1;
visbility: visible;
}