移动导航栏答案

【问题标题】：Mobile Navigation Bar移动导航栏
【发布时间】：2016-11-01 05:04:40
【问题描述】：

大家好，

我的移动导航菜单有问题，

我在导航栏上使用了 float:right，在移动设备上使用了汉堡风格的菜单，

问题在于，在全屏尺寸上，菜单从 Home.... 到 Contact Us 但对于移动设备尺寸的菜单，它从（从上到下） Contact Us .... 到 Homeenter image description这里

<nav><!--start of nav tag-->
            <span class="nav-btn"></span>
                <ul class="nav">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Media</a>
                        <ul>
                            <li><a href="sermons.html">Sermons</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Blah</a></li>
                        </ul>

                    </li>

                    <li><a href="#">Ministries</a>
                        <ul>
                            <li><a href="#">Evangelism</a></li>
                            <li><a href="#">Youth</a></li>
                            <li><a href="#">Newsletter</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Home</a></li>
                </ul><!--End of nav class ul tag-->
        </nav><!--End of nav tag-->





 /*Navigation a*/
    nav .nav li a:hover{
    color:yellow;
    background:black;
    transition:all 0.0s;
}

 /*Navigation a*/
    nav .nav li ul li a:hover{
    width:auto;
    color:yellow;
    text-decoration: none;
    background-color:transparent;

}

     /*Navigation ul size of ul main menu on mobile*/
     .nav {
     width:60%;
     height:auto;
     background:black;
     line-height:50px;
     position:fixed;
     border-radius:0 0 20px 0;
}

 /*Navigation li size of li in mobile mode*/
    nav .nav li{
    width:100%;
    display:block;
    float: none;
    background-color:gray;
    border-bottom:1px red solid;
}



 /*Navigation li size of li in mobile mode*/
    nav .nav li:last-child{
    border-radius:0 0 20px 0;
}

/*                                                                       sub menu background color*/
nav .nav li ul li{
    width:100%;
    height:100%;
    left:30px;
    line-height:30px;
    background-color:orange;
}

/*                                                                       BLACK PATCH MOBILE SIZE*/
nav .nav li ul{


     border-right:0px red solid;
      border-left:0px red solid;
}

/*Show submenu at hover                                                           sub test*/
    nav .nav li:hover ul {
    width:50%;
    padding:0px;
    margin:0px;
    left:75px;
    top:10px;
    background-color:transparent;
}

【问题讨论】：

您当前的代码是什么？你想要的行为是什么？
请张贴html
我的猜测是您需要颠倒菜单元素的顺序并使用 float: left 代替，但如果没有看到您的 html 则无法确定。

标签： html css

【解决方案1】：

您需要颠倒菜单元素的顺序并使用float: left 而不是float: right。

当使用浮动时，第一个元素将根据浮动的方向按照 DOM 顺序移动到后面元素的一侧。您的菜单在桌面上看起来是正确的，因为您将它们以相反的顺序列出然后浮动：右，因此第一个元素位于第二个元素的右侧，依此类推，但是当屏幕太窄而无法浮动时，列表会向后。

您希望菜单以正确的顺序排列，然后使用float: left，这样第一个元素将位于下一个元素的左侧，以此类推。

【讨论】：

我已将其更改为向左浮动但没有乐趣。除非我做错了地方。
如果我使用向左浮动，它在大型媒体中从左侧开始，最简单的浮动方式是向左浮动但要在右侧，我应该使用边距还是有一定的方式来做到这一点。
您是否也颠倒了 HTML 标记中菜单项的顺序？它们应该按照您希望它们在 HTML 中从上到下和从右到左的顺序出现。从您的示例标记中，项目看起来与您想要的顺序相反。
尝试在<ul> 上创建<li> 元素display:inline-block 和text-align: right

【解决方案2】：

对于手机或平板电脑视图，您需要设置媒体查询

media only screen and (max-width:768px){
.nav li{ 
  width:100%; 
  display:block;
   float: none; 
   background-color:gray; 
   border-bottom:1px red solid; 
 }

}

【讨论】：