                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

使用textalign無法使菜單按鈕靠右對齊

<!DOCTYPE?html>
<html>

	<head>
		<meta?charset="utf-8"?/>
		<title></title>
		<style?type="text/css">
			body?{
				margin:?0?auto;
			}
			
			ul?{
				margin:?0;
				padding:?0;
			}
			
			li?{
				list-style:?none;
				float:?left;
				background-color:?goldenrod;
				margin-right:?10px;
			}
			
			li?a?{
				text-decoration:?none;
				color:?white;
				display:?block;
				padding:?5px?20px;
			}
			
			#logo?{
				background-color:?white;
			}
			
			#logo?a?{
				color:?goldenrod;
				display:?block;
			}
			
			#top-logo?{
				display:?none;
				margin:?0?auto;
				width:?200px;
			}
			
			#top-logo?a?{
				text-decoration:?none;
				color:?black;
				font-size:?20px;
			}
			
			.rMenu?{
				display:?none;
			}
			/*還需要考慮兩個分辨率:1.800*600?2.<600*/
			
			@media?only?screen?and?(min-width:?585px)?and?(max-width:?823px)?{
				#logo?{
					display:?none;
				}
				#top-logo?{
					display:?block;
				}
				.menu?{
					width:?585px;
				}
			}
			
			@media?only?screen?and?(max-width:?585px)?{
				#logo?{
					display:?none;
				}
				#top-logo?{
					display:?block;
				}
				.menu?{
					width:?100%;
				}
				.menu?li?{
					width:?100%;
					visibility:?hidden;
				}
				.rMenu?{
					display:?block;
					transform:?rotate(180deg);
					text-align:?right;
				}
			}
		</style>
		<script?src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(function(){
				$('.rMenu').on('click',function(){
					if($('.menu?li').hasClass('active')){
						$('.menu?li').css('visibility','hidden').removeClass('active');
					}else{
						$('.menu?li').css('visibility','visible').addClass('active');
					}
					
				});
			})
		</script>
	</head>

	<body>
		<ul?class="menu">
			<div?id="top-logo">
				<a?href="#">慕課網(wǎng)</a>
				<a?href="#"?class="rMenu"><img?src="img/bird.png"></a>
			</div>
			<li>
				<a?href="#">課程大廳</a>
			</li>
			<li>
				<a?href="#">學(xué)習(xí)中心</a>
			</li>
			<li?id="logo">
				<a?href="#">慕課網(wǎng)</a>
			</li>
			<li>
				<a?href="#">個人中心</a>
			</li>
			<li>
				<a?href="#">關(guān)于我們</a>
			</li>
		</ul>
	</body>

</html>