3

Still learning as I go with CSS styling, and I want to implement a fade-in/fade-out navigation menu. Reading up, I was able to code a fade in on hover successfully to the effect that I want. Now I'm being challenged logically and can't seem to come up with how to code that menu to fade out when the mouse no longer hovers over that specific 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>

Fiddle

I just want a simple fade out without hopefully having to change my structure too much and keeping with CSS.

Thanks for any help!

Natalie Hedström
  • 2,607
  • 3
  • 25
  • 36
Chris Blackmon
  • 197
  • 4
  • 13
  • 1
    Is there a specific reason as to why you are using keyframes instead of a simple [opacity transition](http://stackoverflow.com/a/10565703/1434964)? More on transitions [here](http://stackoverflow.com/a/10565703/1434964) – Natalie Hedström Jun 16 '15 at 08:51

3 Answers3

3

You can acheive a good fade in/out effect using only transitions. This is how I do it

.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 */
}

If you position the sub menu so that it is off the screen using left: -9999em then apply a transition delay on that property so that it will first fade out, then move offscreen when invisible.

But you will need to put another transition to override this when the hover state is activated. This will prevent the position property to be animated on hover-on

Take a look at this jsFiddle

Jackson
  • 3,476
  • 1
  • 19
  • 29
2

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

The only bits that need a change are your CSS for the /*Drop Down Container*/ and the /*Drop Down On Hover Action*/

Rather than hiding the divs with display: none; hide them with opacity: 0; then set an opacity transition. All you need to do to show them is put opacity: 1; on the hover state and they'll fade in and out nicely.

In order to have them usable without them appearing when the mouse passes below the menu you need to set their height, padding and borders to 0 then apply those as part of the hover state.

(Separate hover stated for .navMain, .navMain1 etc could be used if different border styles are required)

You can also remove all the keyframes at the bottom of course.

New 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;
}

Updated Fiddle

JohnCH
  • 365
  • 4
  • 13
  • You should probably change `.nav > li:hover > di` to `.nav > li a:hover + div` to avoid showing the div when placing your mouse beneath the menu :) – Natalie Hedström Jun 16 '15 at 12:10
  • Issue with that was that you couldn't actually use the div, moving the mouse of the menu faded it out. I moved the divs height to the hover and gave it 0 height normally - only issue now is a flicker as you move down. – JohnCH Jun 16 '15 at 12:30
  • Found the cause of the flicker - when you move down from the li to the div it stops showing the div you were looking at and instead always shows the last div. This seems to be because despite `height: 0;` the divs still have an actual height of 22px; – JohnCH Jun 16 '15 at 12:45
  • 1
    This can be fixed by adding the padding and borders to the hover state - edited answer – JohnCH Jun 16 '15 at 12:54
  • This answer was extremely useful! Thanks for that! I was hoping that you could shed a bit more light on the height properties. The fade works beautifully when the height is set on both the hover action and the drop down container, but has the issue that @NatalieHedström was referring to. I believe I follow what you are saying, but the problem I'm having is the fade out leaves a long black line that fades instead of the actual menu, which may be the flicker you are referring to? Also, looking at the updated fiddle, that code does not appear to fade out in the demo pane. – Chris Blackmon Jun 16 '15 at 22:32
  • Interesting, it faded out fine for me. However rather than setting the height properties you can use transition delays as seen in the answer below to move the divs on screen when hovered then not move them back until after the face-out is done! I had completely forgotten transition delays were possible which is why I didn't do that! I'd edit my answer to show you but I'm not at a computer - I'll do it when I can! – JohnCH Jun 16 '15 at 22:39
  • Nevermind, "In order to have them usable without them appearing when the mouse passes below the menu you need to set their height, padding and borders to 0 then apply those as part of the hover state." this line was very important and I missed it. I had to move the borders over to the hover action and drop container div for it to work as it should. Thanks for everyone's help! – Chris Blackmon Jun 16 '15 at 22:42
  • I actually would be interested in seeing the transition delays, that may be very useful, if you don't mind! – Chris Blackmon Jun 16 '15 at 22:47
  • I'll edit my answer tomorrow to add an example of the transition delays if you like, no problem - in the meantime have a look at the jsFiddle in the answer below as it should give you a good idea of how they work – JohnCH Jun 16 '15 at 22:48
1

Following on from Jackson's answer, below is an example of the use of transition delays to achieve the effect.

This method is in some ways simpler as you don't have to move all the padding/border settings to the hover state. Instead you move the divs far off left when not hovered, then set a left: 0; on the hover state.

The transitions have to be set twice (once for on hover and once for off) because you want the left: 0; to take effect immediately on hover and wait till the opacity has transitioned before moving back off.

The full syntax for transitions is 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 Fiddle

JohnCH
  • 365
  • 4
  • 13
  • Thanks a lot, I was able to get it to do what I wanted using this exact method the other day after playing around with a lot. Not be a bother, but would you happen to know a solution to the nav main div becoming visible after applying a delay to the fade out? The left -9999em is cause this as it is moving while be transitioned. I'm theorizing that the only way to achieve this is to increase the time in which it leaves the screen. – Chris Blackmon Jun 18 '15 at 19:55
  • I'm not entirely sure what the issue you're having is? Could you clarify at all? – JohnCH Jun 18 '15 at 23:14
  • Hmm, I'll try my best. I understand if you can't/don't feel like figuring it out since you've helped so much already. Basically I'm trying to set a transition delay of .5s on the hover property, so that when the mouse comes off the main drop down it doesn't immediately disappear (in case the user didn't realize/didn't mean to move the mouse off). When I implement that in my CSS code, there is a short flick, similair to as if you were minimizing a window of the drop down menu moving to the left (which is due to the Left: -9999em; tag). – Chris Blackmon Jun 19 '15 at 03:02
  • If you set a .5s delay on the opacity you need to add .5s to the left delay to keep them in time. It worked for me: [Fiddle](http://jsfiddle.net/j3m6emhv/5/) – JohnCH Jun 19 '15 at 12:45