HTML CSS（敏感的下拉菜單）

我一直試圖解決這個問題很長一段時間了。我需要我的導航來響應。通過響應，我需要我的導航仍然顯示其最小化時的鏈接，並拖動到左側。我的代碼現在做的是鏈接消失，就像最小化時沒有導航欄一樣。先謝謝你！ Normal view HTML CSS（敏感的下拉菜單）

Minimized view

普通視圖（這也是我多麼需要我的導航看起來最小化時等）電流最小化的窗口

這裏是我的下拉我們的CSS菜單代碼：

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#menu { 
    width: 800px; 
    margin: 60px auto; 
    margin-top: -30px; 
    margin-bottom: 10px; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    background-color: #ffffff;/*bg color of drop down menu*/ 


} 

#menu:before, 
#menu:after { 
    content: ""; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu { 
    zoom:1; 
} 

#menu li { 
    float: left; 

    position: relative; 
} 

#menu a { 
    float: left; 
    padding: 12px 30px; 
    color: #999; /* home my acct etc */ 
    text-transform: uppercase; 
    font-family: 'Quicksand', sans-serif; 
    text-decoration: none; 

} 

#menu li:hover > a { /*font color of nav while hover */ 
    color: #000000; 
    background: #FFE87C; /* blue */ 


} 

*html #menu li a:hover { /* IE6 only */ 
    color: #000000; 
} 

#menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1;  
    background:#FFE87C; /* bg color ng drop down yellow */ 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px; 
    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 

} 

#menu ul ul { 
    top: 0; 
    left: 150px; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/ 
    box-shadow: -1px 0 0 rgba(255,255,255,.3);  
} 

#menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 

} 

#menu ul li:last-child { 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 

#menu ul a {  
    padding: 10px; 
    width: auto; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
    color: black; /* font color of drop down */ 


} 

#menu ul a:hover { 
    background-color: #EDDA74;/*hover of link blue*/ 
    color:#000000; 

} 

#menu ul li:first-child > a { 
    border-radius: 3px 3px 0 0; 
} 

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #D1D0CE; 
} 

#menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0; 
    border-bottom: 6px solid transparent; 
    border-top: 6px solid transparent; 
    border-right: 6px solid #D1D0CE; 
} 

#menu ul li:first-child a:hover:after { 
    border-bottom-color: #04acec; 
} 

#menu ul ul li:first-child a:hover:after { 
    border-right-color: #0299d3; 
    border-bottom-color: transparent; 
} 

#menu ul li:last-child > a { 
    -moz-border-radius: 0 0 3px 3px; 
    -webkit-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
} 


@media screen and (max-width: 600px) { 

    /* nav-wrap */ 
    #menu-wrap { 
     position: relative; 
    } 

    #menu-wrap * { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    /* menu icon */ 
    #menu-trigger { 
     display: block; /* show menu icon */ 
     height: 40px; 
     line-height: 40px; 
     cursor: pointer;   
     padding: 0 0 0 35px; 
     border: 1px solid #222; 
     color: #fafafa; 
     background-color: #111; 
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111); 
     border-radius: 6px; 
     box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
    } 

    /* main nav */ 
    #menu { 
     margin: 0; padding: 10px; 
     position: absolute; 
     top: 40px; 
     width: 100%; 
     z-index: 1; 
     background-color: #48CCCD; 
     display: none; 
     box-shadow: none;  
    } 

    #menu:after { 
     content: ''; 
     position: absolute; 
     left: 25px; 
     top: -8px; 
     border-left: 8px solid transparent; 
     border-right: 8px solid transparent; 
     border-bottom: 8px solid #444; 
    } 

    #menu ul { 
     position: static; 
     visibility: visible; 
     opacity: 1; 
     margin: 0; 
     background: none; 
     box-shadow: none;    
    } 

    #menu ul ul { 
     margin: 0 0 0 20px !important; 
     box-shadow: none;  
    } 

    #menu li { 
     position: static; 
     display: block; 
     float: none; 
     border: 0; 
     margin: 5px; 
     box-shadow: none;   
    } 

    #menu ul li{ 
     margin-left: 20px; 
     box-shadow: none;  
    } 

    #menu a{ 
     display: block; 
     float: none; 
     padding: 0; 
     color: #999; 
    } 

    #menu a:hover{ 
     color: #fafafa; 
    } 

    #menu ul a{ 
     padding: 0; 
     width: auto;   
    } 

    #menu ul a:hover{ 
     background: none; 
    } 

    #menu ul li:first-child a:after, 
    #menu ul ul li:first-child a:after { 
     border: 0; 
    }  

}

來源

2014-10-10 user3360708

那麼你有一切設置爲規範，而不是你需要使用％值。例如，您的寬度爲：800px #menu ...返回並將值更改爲百分比值以獲得所需的響應度 – Katler 2014-10-10 14:17:53

我認爲你應該嘗試在你的CSS中使用min-width: x%/xpx設置「html，body」標籤，x是你的選擇，例如min-width: 700px或min-width: 75%

來源

2014-10-10 14:37:38

HTML CSS（敏感的下拉菜單）

回答

相關問題