無法獲得CSS菜單使用下拉子菜單或作出反應

Question

我有一個美麗的CSS菜單，我很想繼續使用，但花了上週試圖做到這一點，所以我可以下拉菜單，無限深度（並讓他們全部留在屏幕內）。我也一直在努力使它對媒體查詢有反應，但在這方面也失敗了。這不應該很難弄清楚，但我似乎無法弄清楚。有沒有人可以幫助我得到這個菜單響應和下拉？

HTML

<header id="header" class="page-header js-header" data-selenium="page-header"> 
    <div class="main-nav"> 
<div class="nav" id="main_menu"> 
    <ul class="topnav"> 
    <li><a href="/c/browse/Photography/ci/989/N/4294538916" target="_self"><span>Photography</span></a></li> 
    <li><a href="/c/browse/Computers-Solutions/ci/9581/N/4294542559 " target="_self"><span>Computers</span></a></li> 
    <li><a href="/c/browse/Professional-Video/ci/3755/N/4294545851" target="_self"><span>Pro Video</span></a></li> 
    <li><a href="/c/browse/Lighting-Studio/ci/1161/N/4294551176" target="_self"><span>Lighting <span class="lighting">&amp; Studio</span></span></a> 
     <ul class="hidden"> 
     <li><a href="#">Drop Down Test</a></li> 
     <li><a href="#">Drop Down Test</a></li> 
     <li><a href="#">Drop Down Test</a></li> 
     </ul> 
    </li> 
    <li><a href="/c/browse/Professional-Audio/ci/12154/N/4294550705" target="_self"><span>Pro Audio</span></a></li> 
    <li><a href="/c/browse/Mobile/ci/8565/N/4294542748" target="_self"><span>Mobile</span></a></li> 
    <li><a href="/c/browse/Home-Entertainment/ci/4600/N/4294544179" target="_self"><span>TVs &amp; Entertainment</span></a></li> 
    <li><a href="/c/browse/Camcorders/ci/1820/N/4294548420" target="_self"><span>Camcorders</span></a></li> 
    <li><a href="/c/browse/Surveillance-Video/ci/3496/N/4293342959" target="_self"><span>Surveillance</span></a> 
     <ul> 
     <li><a href="#">Drop Down Test</a></li> 
     <li><a href="#">Drop Down Test</a></li> 
     <li><a href="#">Drop Down Test</a></li> 
     </ul> 
    </li> 
    <li><a href="/c/browse/Binoculars-Scopes/ci/978/N/4294541872" target="_self"><span>Optics</span></a></li> 
    <li><a href="/c/browse/A-V-Presentation/ci/3644/N/4294546288" target="_self"><span>A/V Presentation</span></a></li> 
    <li class="border-link"><a href="/c/category/2870/Used_Equipment.html">Used</a></li> 
    <li class="border-link"><a href="/explora">Boogers</a></li> 
    <li class="icon"> 
     <a href="javascript:void(0);" onclick="myFunction()">☰</a> 
    </li> 
    </ul> 
</div> 

</div> 
</header> 

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic); 

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { 
    margin:0; 
    padding:0; 
    border:0; 
    font:inherit; 
    vertical-align:baseline 
} 
b, strong { 
    font-weight:700 
} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block 
} 
body { 
    line-height:1 
} 
ol, ul { 
    list-style:none 
} 
blockquote, q { 
    quotes:none 
} 
.new-page-width, .page-width { 
    margin-left:auto; 
    margin-right:auto 
} 
body { 
    font-family:OpenSans, Arial, sans-serif 
} 
.c1 { 
    color:#000 
} 
.c2 { 
    color:#595959 
} 
.c3 { 
    color:#ccc 
} 
.c4 { 
    color:#666 
} 
.c5 { 
    color:#165485 
} 
.c6 { 
    color:#B80505 
} 
.c7 { 
    color:#900 
} 
.c8 { 
    color:#105f9f 
} 
.c9 { 
    color:#696969 
} 
.c10 { 
    color:#81b1d7 
} 
.c11 { 
    color:#2e2e2e 
} 
.c12 { 
    color:#e7e7e7 
} 
.c13 { 
    color:#474747 
} 
.c14 { 
    color:#565656 
} 
.c15 { 
    color:#1B4D88 
} 
.c16 { 
    color:#f93 
} 
.c17 { 
    color:#fdf4b0 
} 
.c18 { 
    color:#fff 
} 
.c31 { 
    color:#1A5888 
} 
.c34 { 
    color:#12a16c 
} 
.c35 { 
    color:#b2b2b2 
} 
.c36 { 
    color:#999 
} 
.c37 { 
    color:#7f7f7f 
} 
.c38 { 
    color:#345 
} 
.c39 { 
    color:#333 
} 
.c40 { 
    color:#708f3f 
} 
.c41 { 
    color:#769e2d 
} 
.c42 { 
    color:#f0f0f0 
} 
body .bold { 
    font-weight:700 
} 
body .smbold { 
    font-weight:600 
} 
.italic, em, i { 
    font-style:italic 
} 
.upper { 
    text-transform:uppercase 
} 
.lower { 
    text-transform:lowercase 
} 
.capitalize { 
    text-transform:capitalize 
} 
.underline { 
    text-decoration:underline 
} 
.noUnderline, .underline-on-hover { 
    text-decoration:none 
} 
.underline-on-hover:hover { 
    text-decoration:underline 
} 
.cursor-pointer { 
    cursor:pointer 
} 
*, :after, :before { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box 
} 
.full-width { 
    width:100% 
} 
.page-width { 
    width:960px 
} 
.new-page-width { 
    max-width:1350px; 
    min-width:1004px; 
    border-left:20px solid transparent; 
    border-right:20px solid transparent 
} 
.left { 
    float:left 
} 
.right { 
    float:right 
} 
.clearfix:after { 
    visibility:hidden; 
    display:block; 
    font-size:0; 
    content:"."; 
    clear:both; 
    height:0 
} 

.page-header { 
    color:#707070; 
    background:#ededed; 
    font-size:16px; 
    position:relative 
} 

.page-header a, .page-header a:hover { 
    text-decoration:none 
} 
.header-main, .header-top>div, .main-nav .nav { 
    max-width:1350px; 
    min-width:1060px; 
    margin:0 auto 
} 
.header-top { 
    border-bottom:1px solid #c2c2c2; 
    margin-bottom:20px; 
    height:40px; 
    line-height:40px; 
    font-size:12px 
} 

.header-top a { 
    padding:0 10px 0 0 
} 
#header .logo { 
    top: 5px; 
    margin-right:35px; 
    position:absolute; 
    left:0 
} 
#header .logo svg { 
    width:87px!important; 
    height:60px!important; 
    pointer-events:all 
} 

.header-main { 
    padding:0; 
    height:80px; 
    position:relative 
} 
.header-main>* { 
    float:left 
} 

這裏是小提琴，如果你想用它玩：https://jsfiddle.net/zyh7grur/1/

Answer 1

我看了一下你的小提琴CSS樣式表。你在每個李上錯過了「懸停」事件的一部分。我只是增加了以下內容：

.main-nav li:hover > ul { 
    display: block; 
    position: absolute; 
    top: 50px; 
    z-index: 9999; 
    background: #769e2d; 
} 

和糾正這樣的：

.main-nav li ul { 
display: none; 
position: absolute; 
} 

我看到TI現在的工作。但你可以檢查下面的jsfiddle，以防萬一：https://jsfiddle.net/zyh7grur/29/