This is more of a css question, I have a bootstrap dropdown menu, but the third level is not displaying this is my css:

.nav {background-color:#330066;}
.nav ul {list-style: none;padding: 0;margin: 0;background: #330066;}
.nav ul li {display: block;/*position: relative;*/float: left; background: #330066;}
.nav li ul { display: none; }
.nav ul li a { display: block; padding: 1em;  text-decoration: none; white-space: nowrap; color: #fff;}
.nav ul li a:hover { background: #beb8d6; }
.nav li:hover > ul {display: block; position: absolute;}
.nav li:hover li { float: none; }
.nav li:hover a { background: #fff; color:#330066; }
.nav li:hover li a:hover { background: #beb8d6; color:#fff;}
.nav ul ul ul {left: 100%; top: 0;}
.nav ul:before,.nav ul:after {content: " "; /* 1 */  display: table; /* 2 */}
.nav ul:after { clear: both; }

Thanks