Question

您好，我尝试了一种新的导航方式。但我似乎无法让悬停效果发挥作用。我以为我已经把它作为目标，但我似乎无法让它发挥作用。我现在只使用一个李，因为我只是尝试一下。任何帮助将不胜感激。

我的代码

<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/

Answer 1

如果我没错，你试图在悬停右边显示子菜单？如果正确，则必须将子菜单可见性设置为可见。检查一下：

/************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{
	 margin-top: 1.7%;
	 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>

导航悬停不起作用

1 个答案: