jquery toggle not clickable

Question

Я включил JQuery hide/show toggle, который должен выполнять меню и подменю. Код работает, но по какой-то причине он не увенчался успехом в контексте моего более широкого кода сайта. Я не могу понять, в чем проблема. Какие-либо предложения? http://studiopowell.net/TEST_gradient.html

JQuery:

$('.menu').click(function(e){ 
    $(this).find('.submenu').fadeToggle(); 
}); 
$('.submenu').click(function(e){ 
    e.stopPropagation(); 
}); 

HTML:

<div id="gradient"> 


<div id="contain"> 
<div class="titles"></div></div> 
<div class="menu">W o r k<div class="submenu">I m a g e</div></div> 

    <div id="menu3"><a href="http://studiopowell.net" target="_blank">I n f o</a></div> 

</div> 

CSS:

#contain{ 
    padding-top: -10px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-align-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    position: relative; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 



.titles { 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    font-size: 14px; 
    color:#33; 
    text-align:left; 
    padding-left: 0px; 
    padding-top: 25px; 
    padding-bottom: 20px; 
    margin-top: 50px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
    -webkit-align-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    position: relative; 
    z-index: 100; 


} 

.submenu { 
    font-family: Arial, "Helvetica Neue"; 
    font-style:underline; 
    font-size: 12px; 
    color:#333; 
    opacity:0.3; 
    text-align:left; 
    padding-left: 100px; 
    padding-top: -100px; 
    margin-top: -14px; 
    padding-bottom: 100px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-align-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    position: absolute; 
    z-index: 8000; 
} 

.menu { 
    font-family: Arial, "Helvetica Neue"; 
    font-style:underline; 
    font-size: 12px; 
    color:#333; 
    opacity:0.4; 
    text-align:left; 
    padding-left: 10px; 
    padding-top: -100px; 
    margin-top: -298px; 
    padding-bottom: 100px; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
    -webkit-align-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
    position:relative; 
    z-index: 8040; 

    } 


#menu3 { 
    font-family: Arial, "Helvetica Neue"; 
    font-style:underline; 
    font-size: 12px; 
    color:#333; 
    opacity:0.4; 
    text-align:left; 
    padding-right: 10px; 
    padding-top: -100px; 
    margin-top: -114px; 
    margin-left:50%; 
    padding-bottom: 100px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: end; 
    -moz-box-pack: end; 
    -webkit-justify-content: flex-end; 
    -ms-flex-pack: end; 
    justify-content: flex-end; 
    -webkit-align-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
    position:relative; 
    z-index:9900; 


} 

Answer 1

Я предложил бы использовать классы, которые делают больше смысла, как это ...

<div class="menu"> 
    Menu 
    <div class="submenu">Sub-Menu</div> 
</div> 

Тогда ваш JQuery просто ...

$('.menu').click(function(e){ 
    $(this).find('.submenu').fadeToggle(); 
}); 

// If you don't want your sub-menu to trigger the toggle, add this: 
$('.submenu').click(function(e){ 
    e.stopPropagation(); 
});