make div shapes disappear after transition - html

Question

Hi guys I have a pretty simple one:
How can I make before and after CSS properties (mainly used to make a DIV shape) disappear after a transition. I am working on a project for class and can't seem to figure it out.
The page is supposed to look like this:
http://ista230.com/images/assignments/7/page2.jpg
Heres what i have for CSS:
/* Navigation */
#nav{
margin-bottom:2%;
margin-top:0%;
width:100%;
background: #1d6287;
}
#nav ul {
padding: 100px 0 0; /* Remove default but add 40px to top */
margin: 0; /* Remove default */
list-style: none;
width: 100%;
overflow: hidden; /* So it 'contains' the floated <li> elements */
}
#nav ul li {
text-align:center;
float: left;
min-height: 50px;
width: 20%; /* 6 items means 20% each */
position: relative;
}
#nav a {
text-decoration:none;
color:black;
display: block;
width: 100%; /* 100% of <li> */
position: absolute;
bottom: 0;
left: 0;
}
div.navItem {
padding: 4% 4%;
position: relative;
background: #D54D25;
border: 2px solid #D54D25;
}
/* For little dumb triangle */
div.navItem:after, div.navItem:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 1px;
width: 1px;
position: absolute;
pointer-events: none;
}
div.navItem:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #D54D25;
border-width: 10px;
left: 50%;
margin-left: -30px;
}
div.navItem:before {
border-color: rgba(213, 77, 37, 0);
border-bottom-color: #D54D25;
border-width: 26px;
left: 40%;
margin-left: -26px;
}
div.navItem{
-moz-transition: height .5s ease; /* Firefox 4 */
-webkit-transition: height .5s ease; /* Safari and Chrome */
-o-transition: height .5s ease; /* Opera */
-ms-transition: height .5s ease; /* IE9 (maybe) */
transition:height .5s ease;
}
.navItem:hover
{
background: #999; /* Old browsers */
color:white;
border:none;
background: #999;
background-image: url("../images/logo.png") no-repeat center; /* fallback */
background: url("../images/logo.png") no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background: url("../images/logo.png")no-repeat center, -webkit-linear-gradient(top, #999, #FEFEFE); /* Chrome 10+, Saf5.1+ */
background: url("../images/logo.png")no-repeat center, -moz-linear-gradient(top, #999, #FEFEFE); /* FF3.6+ */
background: url("../images/logo.png")no-repeat center, -ms-linear-gradient(top, #999, #FEFEFE); /* IE10 */
background: url("../images/logo.png")no-repeat center, -o-linear-gradient(top, #999, #FEFEFE); /* Opera 11.10+ */
background: url("../images/logo.png")no-repeat center, linear-gradient(top, #999, #FEFEFE); /* W3C */
height: 130px;
}
And the HTML:
<nav id="nav">
<ul>
<li><div class="navItem">Home</div></li>
<li><div class="navItem">Upcoming Flights</div></li>
<li><div class="navItem">About Us</div></li>
<li><div class="navItem">Travel Guide</div></li>
<li><div class="navItem">Contact Us!</div></li>
</ul>
</nav>

Answer 1

if you want to disappear up arrow, after hovering menu item you can use this selector:
div.navItem:hover:before{
opacity:0;
}
this selector works for your code. I made some change in your code you can see it here: jsFiddle

Answer 2

You can use jQuery to listen to transition end
jQuery(".navItem").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
your function here;
});
See demo here http://jsfiddle.net/Godinall/Aq2SB/