When designing menus it’s easy to use the boring old display:block and display:none code to hide and show sub-level elements. The downside to that is you can’t use CSS3 effects on them, but if don’t use them you can get caught up showing the element when you don’t want to due to it’s position. z-index is the answer…<\/p>\n
Example:<\/p>\n
<\/code><\/pre>\nCode:<\/p>\n
<div class="container">\n <div class="left">\n <ul>\n <li><a href="#">Menu Item 1</a>\n <ul>\n <li><a href="#">Menu-Sub1</a></li>\n <li><a href="#">Menu-Sub2</a></li>\n <li><a href="#">Menu-Sub3</a></li>\n </ul>\n </li>\n <li><a href="#">Menu Item 2</a></li>\n <li><a href="#">Menu Item 3</a></li>\n </ul>\n <span>Broken</span> \n </div>\n <div class="right">\n <h3>Hover around here and you'll see the problem.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.\n </div>\n</div>\n \n<div class="container">\n <div class="left">\n <ul>\n <li><a href="#">Menu Item 1</a>\n <!-- Here's the fix, check the CSS for the class to get the explanation -->\n <ul class="fixed">\n <li><a href="#">Menu-Sub1</a></li>\n <li><a href="#">Menu-Sub2</a></li>\n <li><a href="#">Menu-Sub3</a></li>\n </ul>\n </li>\n <li><a href="#">Menu Item 2</a></li>\n <li><a href="#">Menu Item 3</a></li>\n </ul>\n <span>Fixed</span> \n </div>\n <div class="right">\n <h3>Hover around here and you'll see it's fixed.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.\n </div>\n</div><\/pre>\n.container { \n width: 500px;\n font-family: arial;\n font-size: 14px;\n border: 1px solid #eee;\n height: 190px;\n margin: 10px;\n box-shadow: 0 0 5px 0 #eee;\n border-radius: 5px;\n \n .left { \n float:left;\n width: 140px;\n height: 180px;\n \n ul {\n width: 140px;\n background: #eee;\n padding: 5px;\n margin: 10px;\n border-radius: 3px;\n border: 1px solid #ddd;\n }\n ul li {\n border-bottom: 1px solid #ddd;\n border-top: 1px solid #f9f9f9;\n padding: 6px 0;\n }\n ul li:first-of-type {\n border-top: none;\n }\n ul li:last-of-type {\n border-bottom: none; \n }\n ul li a { \n display: block;\n color: #888;\n text-shadow: 0 1px 0 #fff;\n text-decoration: none;\n }\n ul li ul { \n opacity: 0;\n position: absolute;\n width: 140px;\n padding: 5px;\n left: 163px;\n margin-top: -30px;\n background: #f4f4f4;\n border: 1px solid #ddd;\n border-radius: 3px;\n transition: opacity .25s ease-in-out;\n }\n ul li ul.fixed {\n /* This is how we fix the problem, attaching the fixed class and setting a negative z-index will hide the element behind any other elements. We could also set a higher z-index on the right block to achieve the same. */\n \n z-index: -1;\n \n /* End fix */\n }\n ul li:hover > ul { \n opacity: 1;\n z-index: 2000; \n }\n span {\n font-size:20px;\n color: #333;\n position: relative;\n bottom: -45px;\n left: 5px;\n }\n }\n .right { \n float:right;\n width: 300px;\n margin: 10px;\n \n h3 {\n font-size: 26px;\n }\n }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"When designing menus it’s easy to use the boring old display:block and display:none code to hide and show sub-level elements. The downside to that is you can’t use CSS3 effects on them, but if don’t use them you can get caught up showing the element when you don’t want to due to it’s position. z-index […]<\/p>\n","protected":false},"author":2,"featured_media":3568,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ep_exclude_from_search":false},"categories":[18,39],"tags":[],"yoast_head":"\n
CSS3 Opacity Fade In With Relative Blocking Elements - E<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Opacity Fade In With Relative Blocking Elements - E\" \/>\n<meta property=\"og:description\" content=\"When designing menus it’s easy to use the boring old display:block and display:none code to hide and show sub-level elements. The downside to that is you can’t use CSS3 effects on them, but if don’t use them you can get caught up showing the element when you don’t want to due to it’s position. z-index […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"E\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-31T01:15:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.ed.gs\/wp-content\/uploads\/2012\/06\/110H.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1365\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ed\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/\",\"url\":\"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/\",\"name\":\"CSS3 Opacity Fade In With Relative Blocking Elements - E\",\"isPartOf\":{\"@id\":\"https:\/\/ed.gs\/#website\"},\"datePublished\":\"2012-10-31T01:15:44+00:00\",\"dateModified\":\"2012-10-31T01:15:44+00:00\",\"author\":{\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ed.gs\/#website\",\"url\":\"https:\/\/ed.gs\/\",\"name\":\"E\",\"description\":\"automation, consultancy, project management, web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ed.gs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628\",\"name\":\"Ed\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g\",\"caption\":\"Ed\"},\"url\":\"https:\/\/ed.gs\/author\/ed\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Opacity Fade In With Relative Blocking Elements - E","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/","og_locale":"en_GB","og_type":"article","og_title":"CSS3 Opacity Fade In With Relative Blocking Elements - E","og_description":"When designing menus it’s easy to use the boring old display:block and display:none code to hide and show sub-level elements. The downside to that is you can’t use CSS3 effects on them, but if don’t use them you can get caught up showing the element when you don’t want to due to it’s position. z-index […]","og_url":"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/","og_site_name":"E","article_published_time":"2012-10-31T01:15:44+00:00","og_image":[{"width":2048,"height":1365,"url":"https:\/\/static.ed.gs\/wp-content\/uploads\/2012\/06\/110H.jpg","type":"image\/jpeg"}],"author":"Ed","twitter_misc":{"Written by":"Ed","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/","url":"https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/","name":"CSS3 Opacity Fade In With Relative Blocking Elements - E","isPartOf":{"@id":"https:\/\/ed.gs\/#website"},"datePublished":"2012-10-31T01:15:44+00:00","dateModified":"2012-10-31T01:15:44+00:00","author":{"@id":"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ed.gs\/2012\/10\/31\/css3-opacity-fade-in-with-relative-blocking-elements\/"]}]},{"@type":"WebSite","@id":"https:\/\/ed.gs\/#website","url":"https:\/\/ed.gs\/","name":"E","description":"automation, consultancy, project management, web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ed.gs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628","name":"Ed","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/ed.gs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g","caption":"Ed"},"url":"https:\/\/ed.gs\/author\/ed\/"}]}},"_links":{"self":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts\/2227"}],"collection":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/comments?post=2227"}],"version-history":[{"count":0,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts\/2227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/media\/3568"}],"wp:attachment":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/media?parent=2227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/categories?post=2227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/tags?post=2227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}