導航懸停不起作用

嗨我正在嘗試導航的新風格。但我似乎無法讓懸停效果起作用。我以爲我有針對性，但我似乎無法得到它的工作。目前我只使用一個鋰，因爲我只是試用它。任何幫助，將不勝感激。導航懸停不起作用

我的代碼

<body> 

<header class="page-header"> 
     <nav class="main-nav" role="navigation" style="position: fixed; top: 0px; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(241, 241, 239);"> 

<div class="wrap"> 


    <div class="menu-category-menu-container"><ul id="menu-category-menu" class="category-nav"><li id="menu-item-13003" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-13003"><a href="http://thefreshexchangeblog.com/category/lifestyle/">Lifestyle</a> 
<ul class="sub-menu"> 
    <li id="menu-item-13153" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13153"><a>On the Daily</a></li> 
    <li id="menu-item-13149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13149"><a>Garden</a></li> 
    <li id="menu-item-13154" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-13154"><a>Our Home</a></li> 
    <li id="menu-item-13022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13022"><a>Loving Now</a></li> 
    <li id="menu-item-13155" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13155"><a>Simple Evenings</a></li> 
    <li id="menu-item-13150" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13150"><a>Home Tours</a></li> 
    <li id="menu-item-13147" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13147"><a>Celebrations</a></li> 
    <li id="menu-item-13146" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13146"><a>Advice &amp; Tips</a></li> 
</ul> 
</li> 

</ul></div> 

</div> 
     </nav> 
     </header> 

    </body>

https://jsfiddle.net/q0zj06qm/1/

來源

2015-06-19 user3660857

什麼是應該引起「懸停效應」？ –

如果我沒看錯，你嘗試懸停時顯示的右邊的子菜單？如果正確，那麼您必須將子菜單可見性設置爲可見。檢查：

/************Naaaaaaaaaaaaaaaaaaaavvvvvvvvvvvv***************************************/ 
 

 
.page-header .main-nav .category-nav { 
 
    float: left; 
 
    margin-left: -28px; 
 
} 
 
thefreshexchangeblog.com/media="all" 
 
ol, ul { 
 
    list-style: none; 
 
} 
 
thefreshexchangeblog.com/media="all" 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
user agent stylesheetul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 40px; 
 
} 
 
Inherited from 
 
thefreshexchangeblog.com/media="all" 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
Inherited from 
 
thefreshexchangeblog.com/media="all" 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
Inherited from 
 
thefreshexchangeblog.com/media="all" 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
Inherited from 
 
thefreshexchangeblog.com/media="all" 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
.page-header .main-nav li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
li{ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
li { 
 
    display: list-item; 
 
    text-align: -webkit-match-parent; 
 
} 
 

 
.page-header .main-nav li a { 
 
    padding: 0 28px; 
 
    display: block; 
 
    font: normal 900 12px/48px 'brandon-grotesque', Arial, sans-serif; 
 
    letter-spacing: 1px; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    color: #ae9623; 
 
    font-style: italic; 
 
    text-decoration: none; 
 
    -webkit-transition: .2s all ease-in-out; 
 
    transition: .2s all ease-in-out; 
 
} 
 

 
.page-header .main-nav li ul { 
 
    visibility: hidden; 
 
    width: 200px; 
 
    margin-left: -100px; 
 
    padding: 14px 0; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    z-index: 2; 
 
    opacity: 1; 
 
    white-space: nowrap; 
 
    background: #000; 
 
    -webkit-transition: .2s all ease-in-out; 
 
    transition: .2s all ease-in-out; 
 
} 
 

 
ol ul, ul ol, ul ul, ol ol { 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 

 
ul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 40px; 
 
} 
 

 
.page-header .main-nav li ul:before { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    margin: auto; 
 
    display: block; 
 
    position: absolute; 
 
    top: -8px; 
 
    left: 0; 
 
    right: 0; 
 
    border-left: 12px solid transparent; 
 
    border-right: 12px solid transparent; 
 
    border-bottom: 8px solid black; 
 
} 
 

 
.page-header .main-nav li ul li { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.page-header .main-nav li ul li a { 
 
    display: block; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    font-size: 9px; 
 
    letter-spacing: 2px; 
 
    color: #fff; 
 
    line-height: 32px; 
 
} 
 

 
element.style { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    border-bottom-width: 1px; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(241, 241, 239); 
 
} 
 

 
.page-header .main-nav { 
 
    height: 48px; 
 
    position: relative; 
 
    z-index: 997; 
 
    background: #fff; 
 
} 
 

 
.wrap { 
 
    max-width: 1024px; 
 
    width: 95%; 
 
    margin: 0 auto; 
 
} 
 

 
.page-header .main-nav ul li:hover ul{ 
 
\t margin-top: 1.7%; 
 
\t display: block; 
 
    visibility: visible; 
 
}

<header class="page-header"> 
 
    <nav class="main-nav" role="navigation" style="position: fixed; top: 0px; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(241, 241, 239);"> 
 
     <div class="wrap"> 
 
      <div class="menu-category-menu-container"> 
 
       <ul id="menu-category-menu" class="category-nav"> 
 
        <li id="menu-item-13003" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-13003"> 
 
         <a href="http://thefreshexchangeblog.com/category/lifestyle/">Lifestyle</a> 
 
         <ul class="sub-menu"> 
 
          <li id="menu-item-13153" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13153"><a>On the Daily</a></li> 
 
          <li id="menu-item-13149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13149"><a>Garden</a></li> 
 
          <li id="menu-item-13154" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-13154"><a>Our Home</a></li> 
 
          <li id="menu-item-13022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13022"><a>Loving Now</a></li> 
 
          <li id="menu-item-13155" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13155"><a>Simple Evenings</a></li> 
 
          <li id="menu-item-13150" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13150"><a>Home Tours</a></li> 
 
          <li id="menu-item-13147" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13147"><a>Celebrations</a></li> 
 
          <li id="menu-item-13146" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13146"><a>Advice &amp; Tips</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
</header>

這段代碼中

來源

2015-06-19 17:51:12

導航懸停不起作用

回答

相關問題