1)请重新查看代码并给出您的建议，我已经发布了我的HTML和CSS代码，CSS过渡不工作。2)我已经添加过渡到导航。菜单1，导航。菜单a， #drop， #drop3 )
<!DOCTYPE>
<html>
<head>
<title> :: CSS Menu ::</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<div id="container">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" id = "submenu">Gallery</a>
<ul class="submenu" id = "drop">
<li><a href="#">Gallery1</a></li>
<li><a href="#">Gallery2</a></li>
<li><a href="#">Gallery3</a></li>
<li><a href="#">Gallery4</a></li>
<li><a href="#">Gallery5</a></li>
</ul>
</li>
<li><a href="#" id = "submenu">Site Map</a>
<ul class="submenu" id = "drop">
<li><a href="#">SiteMap1</a></li>
<li><a href="#">SiteMap2</a></li>
<li><a href="#">SiteMap3</a></li>
<li><a href="#">SiteMap4</a></li>
<li><a href="#">SiteMap5</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
//-----------------Transition Script-------------------
<script>
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
</script>
</body>
</html>
//------------------css------------------
body, html{
width: 100%;
margin: 0 auto;
padding: 0px;
}
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
float: left;
margin: 50px 0 0 50px;
}
nav ul{
float: left;
background-color: #ffa800;
border-radius: 3px;
position: relative;
}
nav ul.menu li{
height: 35px;
float: left;
display: inline;
list-style-type: none;
line-height: 15px;
padding: 10px 20px;
position: relative;
}
nav ul.menu li a{
text-decoration: none;
font: bold 14px Arial, Helvetica, sans-serif;
color: #fff;
}
nav ul.menu li:hover a{
color: #c14a02;
}
nav ul.menu li ul.submenu{
width: 100%;
position: absolute;
top: 35px;
left: 0;
display: none;
background-color: #e5e4e4;
border: none;
text-align: center;
margin: 0px;
}
nav ul.menu li:hover ul.submenu{
display: block;
}
nav ul.menu li ul.submenu li{
width: 100%;
text-align: center;
margin: 0;
padding: 10px 5px 0 0;
}
nav ul.menu li ul.submenu li a{
color: #464645;
}
nav ul.menu li ul.submenu li a:hover{
color: #ffa800;
}
//-------------------------Transition Code----------------
nav ul.menu li{
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
}
nav ul.menu li a{
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
#drop {
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
#drop li {
transition: height 0.5s;
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
}
似乎有效。——> jsfiddle
另外，将javascript代码放在head标签内而不是html的底部也是一个很好的做法。
<head>
<title> :: CSS Menu ::</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
<script>
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
</script>
</head>
DEMO
你可以用Css代码制作流畅的动画
提示:在标准之前放置前缀css。这样的
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);