导航无响应

Question

我试图让导航更加适合移动设备，当屏幕分辨率大于767px时，一切都按预期工作。一切都集中在一起。

当我小于767px时，它会变得不对齐，看起来很奇怪。

这是我的CSS：

#nav{
    text-align: center;
    max-width:997px;
    margin:0 auto;
    padding:14px 10px 15px;
}
#nav ul{    padding:0;  margin:0;
    list-style:none;
}
#nav:after{
    content:''; display:block;  clear:both;
}
#nav > ul > li{
    font-weight:bold;
    margin:0 0 0 73px;
    position:relative;
    display:inline-block;
}
#nav > ul > li:first-child{margin:0;}
#nav a{color:#d1d1d1;}
#nav> ul > li> a:hover,
#nav> ul > .active > a{
    color:#f5f5f5;
    text-decoration:none;
}
#nav .drop{
    position:absolute;
    top:-9999px;
    left:-5px;
    background:#2c2c2c;
    min-width:125px;
    padding:20px 0 0;
}
@media only screen and (max-width:767px){
    #nav > ul > li{
        float:none;
        margin:0;
        padding:0 20px 5px;
    }
    #nav .drop{
        float:left;
        width:100%;
        position:static;
        padding:5px 5px 0;
    }
}

这是我的HTML：

          <nav id="nav">
            <ul>
              <li class="active"><a href="index.php">HabboValley</a></li>
              <li>
                <a href="#">Community</a>
                <ul class="drop">
                  <li><a href="team.php">Meet The Team</a></li>
                  <li><a href="jobs.php">Jobs</a></li>
                  <li><a href="contact.php">Contact Us</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Radio/Events</a>
                <ul class="drop">
                  <li><a href="reqline.php">Request Line</a></li>
                  <li><a href="radio.php">Radio Timetable</a></li>
                  <li><a href="events.php">Event Timetable</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Resources</a>
                <ul class="drop">
                  <li><a href="#">Guides (Coming Soon)</a></li>
                  <li><a href="#">News (Coming Soon)</a></li>
                  <li><a href="#">Goodies (Coming Soon)</a></li>
                </ul>
              </li>
              <li><a href="http://habbovalley.com/forum" target="_blank">Forum</a></li>
            </ul>
          </nav>

屏幕LARGER的屏幕截图比767px：http://prntscr.com/fcir4u

小于767px的屏幕截图：http://prntscr.com/fcirb5

任何帮助都会很棒！

Answer 1

您应该为css创建不同的断点，以便正确显示。您的子菜单如何工作？我试图点击并将鼠标悬停在菜单上，但子菜单不会显示。无论如何，这里有一个简短的指南来修复你的风格。正如我在 Bootstrap 中所读到的那样，理想的方式是移动优先。

首先根据小型设备的外观设计您的页面。

此标签来自TeamTreehouse的Pedro Ferrari。

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }