Czy spotkaliście się z czymść takim w Chrome i tylko w Chrome, że po najechaniu kursorem myszki na
ul li pokazywało się
ul li ul ale po najechaniu kursorem na
ul li ul menu
ul li ul znikało. Jednak gdy wejdę na inną zakładkę i wrócę na moją stronę to menu cudownie zaczyna działać. CSS jest następujący:
nav { float:left; margin-top:0px; margin-left:-20px; }
nav a {color: #4d4d4d;}
nav ul, nav ul ul { margin:0 0 0 20px; padding:0; list-style-type:none; list-style-position:outside; background:#ffffff; position:relative; z-index:5000; font:12px Open Sans; }
nav ul a:link, nav ul a:active, nav ul a:visited { display:block; padding:0; text-decoration:none; }
nav ul ul a:link, nav ul ul a:active, nav ul ul a:visited { display:block; padding:0 0 0 3px; text-decoration:none; }
nav ul li { float:left; position:relative; background:none; padding:5px 12px; margin-right:6px; text-shadow:#ffffff 1px 1px 0px; transition: all 300ms ease-in; }
nav ul li:hover { background:#ededed; }
nav ul ul { position:absolute; left:-20px; text-align:left; padding:8px 0 14px 10px; border-top:3px solid #f69200; box-shadow: 5px 5px 4px 0px rgba(00, 00, 00, 0.2); width:180px; top:26px; display:none; font-size:12px; font-family:Open Sans; }
nav ul ul a { color:#414141; }
nav ul li ul a { width:170px; float:left; }
nav ul ul ul:hover{ width:180px; }
nav ul li ul ul { left:160px; top:-2px; margin:0px; border-left:3px solid #f69200; border-top:none; }
nav ul li ul li { padding:10px 0px 10px 5px; margin-left:0px; margin-right:0px; height:14px; width:166px; border-bottom:1px solid #ededed; max-width:none; list-style-type:none; text-transform:none; }
nav ul li:hover ul ul, nav ul li:hover ul ul ul, nav ul li:hover ul ul ul ul { display:none; }
nav ul li:hover ul, nav ul li li:hover ul, nav ul li li li:hover ul, nav ul li li li li:hover ul { display:block; }
nav ul li ul.children li { list-style-type:none; }
nav ul li.current-menu-item { background:#f69200; color:#ffffff; text-shadow:none; }
nav ul li ul li.current-menu-item { background:#ededed; color:#8a8a8a; text-shadow:none; }
nav ul li ul li.current-menu-item a { color:#8a8a8a; }
nav ul li.current-menu-item a { color:#ffffff; }
nav ul li.current-menu-item ul li a { color:#414141; }
nav ul li.current-menu-item span { color:#ffffff; }
nav ul li.parent { background-image: url( images/menu-arrow3.png ); background-position: right center; background-repeat: no-repeat; }
nav ul li ul li.parent { background-image: url( images/menu-arrow3-child.png ); background-position: 160px center; background-repeat: no-repeat; }
nav ul li.current-menu-item { background-image:none; }
nav ul li.parent:hover { background-image: url( images/menu-arrow1.png ); background-position: center bottom; background-repeat: no-repeat; }
nav ul li.parent.current-menu-item:hover { }
nav ul li ul li.parent:hover { background-image: url( images/menu-arrow2.png ); background-position: 152px center; background-repeat: no-repeat; }
Tutaj jest cały kod:
<!DOCTYPE html>
body { color:#505050; font-size: 12px; padding:0px; }
nav ul, nav ul ul { margin:0 0 0 20px; padding:0; list-style-type:none; list-style-position:outside; background:#ffffff; position:relative; z-index:500; }
nav ul a:link, nav ul a:active, nav ul a:visited { display:block; padding:0; text-decoration:none; }
nav ul ul a:link, nav ul ul a:active, nav ul ul a:visited { display:block; padding:0 0 0 3px; text-decoration:none; }
nav ul li { float:left; position:relative; padding:5px 12px; margin-right:6px; }
nav ul ul { position:absolute; left:-20px; text-align:left; padding:8px 0 14px 10px; width:180px; top:25px; display:none; font-size:12px; }
nav ul li ul a { width:170px; float:left; }
nav ul ul ul:hover{ width:180px; }
nav ul li ul ul { left:160px; top:-2px; margin:0px; border-left:3px solid #f69200; border-top:none; }
nav ul li ul li { padding:10px 0px 10px 5px; margin-left:0px; margin-right:0px; height:14px; width:166px; border-bottom:1px solid #ededed; max-width:none; list-style-type:none; text-transform:none; }
nav ul li:hover ul ul, nav ul li:hover ul ul ul, nav ul li:hover ul ul ul ul { display:none; }
nav ul li:hover ul, nav ul li li:hover ul, nav ul li li li:hover ul, nav ul li li li li:hover ul { display:block; }
nav ul li ul.children li { list-style-type:none; }
<nav>
<ul id="menu-main" class="nav"><li id="menu-item-154" class="parent menu-item menu-item-has-children menu-item-154"><a href="">Home
</a> <li id="menu-item-283" class="menu-item menu-item-283"><a href="frontpage-2/">Frontpage 2
</a></li> <li id="menu-item-282" class="menu-item menu-item-282"><a href="frontpage-3/">Frontpage 3
</a></li> <li id="menu-item-476" class="menu-item menu-item-476"><a href="frontpage-4/">Frontpage 4
</a></li> <li id="menu-item-78" class="parent menu-item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-78"><a href="about-us/">About Us
</a> <li id="menu-item-260" class="menu-item current-menu-item page_item page-item-258 current_page_item menu-item-260"><a href="shortcodes/">Shortcodes
</a></li> <li id="menu-item-116" class="menu-item menu-item-116"><a href="child-menu-1/">Fusce feugiat a interdum
</a></li> <li id="menu-item-115" class="parent menu-item menu-item-has-children menu-item-115"><a href="child-menu-2/">Full width page
</a> <li id="menu-item-128" class="menu-item menu-item-128"><a href="child-menu-a/">Aliquam erat volutpat
</a></li> <li id="menu-item-127" class="menu-item menu-item-127"><a href="child-menu-b/">Non pellentesque
</a></li> <li id="menu-item-114" class="menu-item menu-item-114"><a href="child-menu-3/">Nam quis sollicitudin
</a></li> <li id="menu-item-126" class="menu-item menu-item-126"><a href="child-menu-4/">Etiam nulla vitae
</a></li> <li id="menu-item-427" class="parent menu-item menu-item-has-children menu-item-427"><a href="events/">Events
</a> <li id="menu-item-428" class="menu-item menu-item-428"><a href="events/my-bookings/">My Bookings
</a></li> <li id="menu-item-429" class="menu-item menu-item-429"><a href="events/tags/">Tags
</a></li> <li id="menu-item-430" class="menu-item menu-item-430"><a href="events/categories/">Categories
</a></li> <li id="menu-item-431" class="menu-item menu-item-431"><a href="events/locations/">Locations
</a></li> <li id="menu-item-125" class="menu-item menu-item-125"><a href="child-menu-5/">Morbi varius augue
</a></li> <li id="menu-item-22" class="parent menu-item menu-item-has-children menu-item-22"><a href="activity/">Activity
</a> <li id="menu-item-159" class="menu-item menu-item-159"><a href="suspendisse-et-nunc/">Suspendisse et nunc
</a></li> <li id="menu-item-28" class="menu-item menu-item-28"><a href="blog/">Blog
</a></li> <li id="menu-item-20" class="menu-item menu-item-20"><a href="forum/">Forum
</a></li> <li id="menu-item-21" class="menu-item menu-item-21"><a href="groups/">Groups
</a></li> <li id="menu-item-23" class="menu-item menu-item-23"><a href="members/">Members
</a></li> <li id="menu-item-79" class="parent menu-item menu-item-79"><a href="contact-us/">Contact Us
</a> <li id="menu-item-243" class="parent menu-item menu-item-243"><a href="">My Account (Shop)
</a></li> <li id="menu-item-247" class="menu-item menu-item-247"><a href="">Track your order
</a></li> <li id="menu-item-248" class="parent menu-item menu-item-248"><a href="checkout/">Checkout
</a></li> <li id="menu-item-251" class="menu-item menu-item-251"><a href="cart/">Cart
</a></li> <li id="menu-item-252" class="parent menu-item menu-item-has-children menu-item-252"><a href="shop/">Shop
</a> <li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-253"><a href="product-category/jeans/">Jeans
</a></li> <li id="menu-item-254" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-254"><a href="product-tag/product-tag-1/">Product tag 1
</a></li> </nav>
Ten post edytował AboutMe 11.05.2015, 15:07:13