更新时间:2023-11-17 16:09:40
因此
<ul class="primary">
<li>Tutorial</li>
<ul class="secondary">
<li>Photoshop</li>
<li>Illustrator</li>
<li>Flash</li>
<li>HTML</li>
<li>PHP</li>
<li>Wordpress</li>
<li>jQuery</li>
<li>more...</li>
</ul>
<li>Wallpaper</li>
<li>Get A Quote</li>
<li>Photography</li>
<li>Freelance</li>
</ul>
那么你的样式会是这样的(这只是使用CSS3而不是JS)
then your styling would be like so ( this is using just CSS3, not JS )
<style>
ul.primary {
width: -- ;
height: -- ;
margin: -- ;
overflow: hidden;
}
ul.primary > li {
width: -- ;
height: -- ;
margin: -- ;
float: left;
list-style: none;
}
ul.seconday {
opacity: 0;
width: -- ;
height: -- ;
margin: -- ; /* when this is used with position: relative you can adjust where the drop down is placed. */
position: relative; /* need to set this to relative to position properly */
/* css3 transition */
transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}
ul.primary > li:hover ul.secondary {
opacity: 1;
}
</style>