CODEWITHSUNDEEP
htmlcsscss-transitions
Szabó Sándor István
Szabó Sándor István

Reputation: 113

CSS Transition not working on nested items

My transition does not apply to the submenu <a> tag. The color change is doing well, but the transition does not trigger on hover. If I apply the same rules, on another element with a main class, it works well. The problem is with nested elements or CSS subclasses/selectors. Any ideas?

I have the following HTML, JS structure & CSS:

$( document ).ready(function() {	
	$('.menu_container').mouseover(function(e) {
   	$('ul', this).show();
});
	$('.menu_container').mouseout(function(e) {
   	$('ul', this).hide();
});
});
.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:51px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Live example: http://thyalie.ro/casedevanzareoradea/

Upvotes: 4

Views: 806

Answers (3)

Jamie Paterson
Jamie Paterson

Reputation: 446

Add

transition: color 2s;

to 

.menu li.menu_container ul li a:hover

Upvotes: -1

somethinghere
somethinghere

Reputation: 17350

Your Javascript seems to be interfering with displaying your menu correctly. You do not need any javascript to make this work, however, you can do it on pure CSS, by adding this line:

.menu li.menu_container:hover ul { display: block; }

Because a hover hovers over the parent as well, this works just fine an requires no JS whatsoever.

.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container:hover ul { display: block; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Upvotes: 1

Jacob
Jacob

Reputation: 2154

Use jQuery's mouseenter and mouseleave events rather than mouseover and mouseout.

mouseover and mouseout fire every time you hover from one element to another within .menu_container. Therefore, when you hover from one element to a submenu item, the submenu ul's inline style is being rapidly changed from display: none to display: block. This causes the transition on the links to not take effect.

This jQuery page has a good example of the differences between the events.

$( document ).ready(function() {	
	$('.menu_container').mouseenter(function(e) {
   	$('ul', this).show();
});
	$('.menu_container').mouseleave(function(e) {
   	$('ul', this).hide();
});
});
.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Upvotes: 1

Related Questions