導航未響應

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> 

屏幕比767px更大截圖：屏幕要小的http://prntscr.com/fcir4u

截圖比767px：http://prntscr.com/fcirb5

任何幫助將是偉大的！

Answer 1

你應該爲你的css創建不同的斷點，以便它能正確顯示。你的子菜單是如何工作的？我試圖點擊並懸停在菜單上，但是您的子菜單不會顯示。無論如何，這裏是一個簡短的指南來解決你的風格。正如我在Bootstrap中讀到的理想方式是Mobile First。

首先設計你的頁面，看它在小設備中的樣子。

該標籤來自Pedro Ferrari in TeamTreehouse。

/*================================================== 
=   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) { 

    }