Question

我试图用Javascript做一些淡化效果，但它给了我一些问题。我已经设法让我的下拉菜单完全使用CSS，但我无法弄清楚如何让菜单在由于某种原因悬停在它的父母上时淡入/淡出菜单。

HTML

<body>
<div id="header1">
<table width="100%" height="60px" border="0">
  <tr>
    <td align="center"><ul id="horiznav">
    <li><a href="#" class='class2'>Home</a></li>
    <li><a href="#" class='class2'>Statistics</a></li>
    <li><a href="#" target="_blank" class='class2'>Overview</a></li>
    <li><a href="#" class='class2'>Lists</a>
        <ul>
        <li><a href="#" class='class2'>All Active Projects</a></li>
        <li><a href="#" class='class2'>By Phase</a></li>
        <li><a href="#" class='class2'>By User</a></li>
        <li><a href="#" class='class2'>Completed Projects</a></li>
        </ul>
    </li>
    <li><a href="#" class='class2'>New Project</a></li>
    <li><a href="#" class='class2'>Administration</a></li>
  </ul></td></tr>
</table>
</div>
</body>

CSS

#header1{
    background: #0d2965;
    background-color: #0d2965;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}

ul#horiznav, #horiznav ul{/*remove the bullets from the dropdown ul as well*/
    margin:0;
    padding:0;
    list-style-type:none;
    height:32px;
    text-align:center
}

#horiznav li{
    display: inline-block;
    /*float: left;*//*float the li element so the menu's horizontal...*/
    width:150px;/*...and set the width*/
    z-index: 1;
    position:relative;/*set position:relative as the start point for absolutely positioning the dropdown*/
}

#horiznav li a{
    display:block;/*make the link a block element...*/
    width:150px;/*...with a fixed width...*/
    line-height:30px;/*...and set the line-height to vertically centre the text*/
    text-align:center;/*horizontally centre the text...*/
    color:white;/*...colour it white...*/
    text-decoration:none;/*...and remove the default underline*/
    background-color:#EA9531;/*give the link an orange background...*/
    border:1px solid white/*...and a white border...*/
}

#horiznav li a:hover{
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    color:#333333/*change the text colour on :hover*/
}

#horiznav li ul{
    display:none;/*hide the dropdown*/
    position:absolute;/*position it absolutely..*/
    left:0;/*...align the left edge with the left edge of the parent li...*/
    top:32px/*...and 32px down from the top - 30px height + 2px for the border*/
}

#horiznav li:hover ul {
    display:block/*display the ul when the parent li is hovered*/
}

#horiznav li ul a{
    background-color:#FFB33B/*give the dropdown a different background colour*/
}

有没有人有任何想法或链接指出我正确的方向？

提前致谢！

Answer 1

Transition无法在display属性上使用。

改为使用visibility和opacity。

使用此CSS

#horiznav li ul {
    -webkit-transition:visibility 0.5s ease, opacity 0.5s ease;
    -moz-transition:visibility 0.5s ease, opacity 0.5s ease;
    -o-transition:visibility 0.5s ease, opacity 0.5s ease;
    transition:visibility 0.5s ease, opacity 0.5s ease;
    visibility:hidden;
    opacity:0;
    position:absolute;
    left:0;
    top:32px;
}

#horiznav li:hover ul {
    visibility:visible;
    opacity:1;
}

Proof in JSFiddle

对我来说很好。

没有Javascript的CSS下拉菜单淡入淡出

1 个答案: