CSS Menu Nav Fade Out OFF Hover

Question

I'm still involved in CSS style and I want to implement the fade-in / fade-out navigation menu. While practicing, I was able to quickly hesitate in an inclined course, so that the effect I want. Now I am being challenged logically and seem to be unable to figure out how to encode this menu in order to disappear when the mouse no longer hangs over this particular class.

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: grey;
}
body {
  position: fixed;
  font-family: Serif, sans-serif;
  background: white;
  font-size: 62.5%;
  color: black;
}
/*Nav Wrapper*/

#navWrapper {
  width: 1100px;
  position: fixed;
  top: 30px;
  left: 0px;
  right: 0px;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
}
/*Banner Wrapper*/

.bannerWrap {
  width: 1100px;
  position: fixed;
  left: 0px;
  right: 0px;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
}
/*Banner Styling*/

.banner {
  border: 1px solid black;
}
/*Main Nav Box Styling*/

.nav {
  position: fixed;
  list-style: none;
  width: 1102px;
  top: 70px;
  margin: 30px auto 0px auto;
  height: 43px;
  padding: 0px 20px 0px 20px;
  background: #323552;
  background: -moz-linear-gradient(top, #323552, #1a1b24);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
  border: 1px solid #002232;
}
/*Main Nav Button Styling*/

.nav li {
  float: left;
  text-align: center;
  position: relative;
  padding: 4px 10px 4px 10px;
  margin-right: 30px;
  margin-top: 7px;
  border: none;
  background-color: transparent;
}
/*Main Nav Button Styling*/

.nav > li > a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #EEEEEE;
  display: block;
  outline: 0;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
  text-transform: uppercase;
  background-color: transparent;
}
/*Drop Down On Hover Action*/

.nav > li:hover > div {
  display: block;
  left: 0;
  -webkit-animation: fadein .5s;
  /* Safari and Chrome */
  -moz-animation: fadein .5s;
  /* Firefox */
  -ms-animation: fadein .5s;
  /* Internet Explorer */
  -o-animation: fadein .5s;
  /* Opera */
  animation: fadein .5s;
}
/*Drop Down Container*/

.nav > li > div {
  position: fixed;
  right: -1px;
  top: 147px;
  height: 300px;
  display: none;
  padding: 10px 10px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
  background: #323552;
  background: -moz-linear-gradient(top, #323552, #1a1b24);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
  overflow: hidden;
}
/*Drop Down*/

.navMain {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  border: 1px solid black;
}
/*Nav Text Styling*/

.dropContent {
  background: transparent;
  color: #b9b9b9;
}
/*Nav Text Styling*/

.nav-titles {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;
  background: transparent;
}
/*Nav Icons Styling*/

.navIcon {
  width: 15px;
  height: 15px;
  background: transparent;
}
/*Nav Sub Menu*/

.navDropLinks {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  display: block;
  padding-bottom: 6px;
  background: transparent;
}
/*Nav Sub Menu Hyper*/

.navDropLinks > a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}
/*Nav Sub Menu Left Column*/

.navLeft {
  position: absolute;
  left: 10px;
  width: 330px;
  display: inline-block;
  font-size: 11px;
  text-align: left;
  padding-right: 3px;
  background: transparent;
}
/*Nav Sub Menu Center Column*/

.navCenter {
  position: absolute;
  width: 330px;
  left: 357px;
  font-size: 11px;
  text-align: center;
  background: transparent;
}
/*Nav Sub Menu Right Column*/

.navRight {
  position: absolute;
  right: 10px;
  width: 330px;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  padding-left: 3px;
  background: transparent;
}
/*Nav Sub Menu Focus Images*/

.navImage {
  display: inline-block;
  width: 275px;
  height: 120px;
  background: transparent;
}
/*Alt Nav Sub Menus*/

.navMain1 {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  /* Gradient background */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  border: 1px solid black;
}
/*Alt Nav Sub Menus*/

.navMain2 {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  /* Gradient background */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  border: 1px solid black;
}
/*To Line 270: Keyframes for Nav Animation*/

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari and Chrome */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<!--Nav Wrapper-->
<div class="bannerWrap">
  <img class="banner" src="images/general/site/bannerlg.png">
</div>
<div id="navWrapper">
  <ul class="nav">
    <li><a href="#">Final Cut</a>

      <!--Begin Main Div-->
      <div class="navMain">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nave Right-->
      </div>
      <!--End Main Div-->
    </li>
    <li><a href="#">News</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Articles</a>

      <!--Begin Main Div-->
      <div class="navMain2">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Sets</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Resources</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
  </ul>
  <!--End Nav List-->
  </div>

Run code

Fiddle

I just want a simple fade, not hoping to change my structure too much and keep CSS.

Thanks for any help!

Answer 1

Natalie is absolutely right, transitions are a way to do this.

The only bits that need to be changed are your CSS for /*Drop Down Container*/and/*Drop Down On Hover Action*/

, divs display: none; opacity: 0;, . , , , opacity: 1; , .

, , , 0, .

( , .navMain,.navMain1 .., , )

.

CSS:

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    height: 300px;
    padding: 10px 10px;
    border:1px solid #777777; // removed borders from .navMain, .navMain1 etc
    border: 1px solid black;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: 0;        // added the left: 0; here
    top: 337px;
    height: 0;  // height: 0 when not hovered
    opacity: 0;             // swapped for display:none;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background: #323552;
    background: -moz-linear-gradient(top, #323552, #1a1b24);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
    overflow: hidden;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

Answer 2

/, .

.sub-menu {
    position: absolute;
    left: -9999em;
    width: 200px;
    background-color: #eee;
    opacity: 0;
    transition: left 0.5s ease 0.5s, opacity 0.5s ease; /* Transition on left position */
}
.main-nav li:hover .sub-menu {
    left: 0;
    opacity: 1;
    transition: opacity 0.5s ease; /* No transition on left position when hovering */
}

, left: -9999em, , , .

, , . position

jsFiddle

Answer 3

, .

, / . divs , , left: 0; .

Transitions must be set twice (once for hover and once for shutdown) because you want it to left: 0;take effect immediately on hover and wait for the opacity to move before moving backward.

Full syntax for transitions - transition: <property> <duration> <style: ease> <delay: 0s>

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    left: 0;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: -9999em; 
    top: 337px;
    opacity: 0;     
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background: #323552;
    background: -moz-linear-gradient(top, #323552, #1a1b24);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
    overflow: hidden;
    -webkit-transition: opacity .5s ease-in-out, left .5s ease .5s; 
    -moz-transition: opacity .5s ease-in-out, left .5s ease .5s;
    -ms-transition: opacity .5s  ease-in-out, left .5s ease .5s;
    -o-transition: opacity .5s ease-in-out, left .5s ease .5s;
    transition: opacity .5s ease-in-out, left .5s ease .5s;
}

Updated script