jquery - Navigation hover not working -
hi i'm trying out new style navigation. can't seem hover effect working. thought had targeted can't seem working. i'm using 1 li @ moment cause i'm trying out. appreciated.
my code
<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 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 & tips</a></li> </ul> </li> </ul></div> </div> </nav> </header> </body>
if i'm not wrong, try show sub-menu on hover right? if right, must set sub-menu visibility visible. check this:
/************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 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 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 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 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 { 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; } { color: #ae9623; font-style: italic; text-decoration: none; -webkit-transition: .2s ease-in-out; transition: .2s 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 ease-in-out; transition: .2s 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 { 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 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 & tips</a></li> </ul> </li> </ul> </div> </div> </nav> </header>
Comments
Post a Comment