谁能帮我做一个垂直导航栏（媒体查询）答案

【问题标题】：Can anyone help me make a vertical navigation bar (Media Query)谁能帮我做一个垂直导航栏（媒体查询）
【发布时间】：2014-05-15 18:57:36
【问题描述】：

我只是在寻求您的帮助以获得垂直导航栏，当它是一个如此具体的问题时，很难通过互联网找到帮助，所以任何答案都将不胜感激......这是针对 480 x 的媒体查询800.

@media screen and (min-width:480px) and (max-width:800px){ #header{ height:100px; width:480px; } #nav{ padding: 15px; } #nav li ul{ list-style-type: none; padding: 15px; margin-left: 0; border-right:none; } #nav li a{ text-decoration: none; background-color: #ffffff; display: block; width: 8em; border-bottom:1px solid #eb322c; padding: 15px; }

【问题讨论】：

您能否删除不必要的代码并将其缩小到具体问题..？带有相应代码的JSFiddle 会更好..
TJ @media screen and (min-width:480px) and (max-width:800px){ #header{ height:100px;宽度：480px； } #nav{ 填充：15px; } #nav li ul{ 列表样式类型：无；填充：15px；左边距：0；右边框：无； } #nav li a{ 文字装饰：无；背景颜色：#ffffff；显示：块；宽度：8em；边框底部：1px 实心#eb322c；填充：15px； }
请不要发表评论，而是使用相关信息编辑和更新问题，以便社区可以轻松帮助您..

标签： html css

【解决方案1】：

用这个 css 改变媒体查询 css

@media screen and (min-width:480px) and (max-width:800px){
#header{
height:100px;
width:480px;
}

#nav{ 
padding: 5px;
position: absolute;
left: 0px;
width: 150px;    
}
#nav ul {
padding: 5px;
border-left: 1px;
text-align: center;
 width: 150px;}

#nav li ul{
list-style-type: none;      
padding: 15px;      
margin-left: 0; 
border-right:none;

}

#nav li a{
text-decoration: none;            
background-color: #ffffff;      
display: block;      
width: 8em; 
border-bottom:1px solid #eb322c;
padding: 15px;    


}

【讨论】：