                        课程
                    
                        /前端开发
                        
                            /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="#">慕课网</a>
				<a href="#" class="rMenu"><img src="img/bird.png"></a>
			</div>
			<li>
				<a href="#">课程大厅</a>
			</li>
			<li>
				<a href="#">学习中心</a>
			</li>
			<li id="logo">
				<a href="#">慕课网</a>
			</li>
			<li>
				<a href="#">个人中心</a>
			</li>
			<li>
				<a href="#">关于我们</a>
			</li>
		</ul>
	</body>

</html>