mega menu going out of window - html

Question

http://jsfiddle.net/vxaAE/
I tried to integrate this menu in my project but it comes to me with two problems.
- sub menu going out of window when I have this scenario-
http://jsfiddle.net/vxaAE/
- I tried to give submenu's width to auto, because it would be according to sub menu's length.
How do I get this working?
CSS-
.mega-wrapper {
width: 100%;
margin: 0 auto;
}
.mega-nav {
position: relative;
width: auto;
height: 59px;
background: #252428;
}
.mega-nav ul .mega-ul {
display: block;
margin: 0;
padding: 0;
list-style: 0;
}
.mega-nav .mega-ul li {
position: relative;
display: inline-block;
}
.mega-nav .mega-ul li a {
display: block;
font-size: 1em;
color: #fff;
text-decoration: none;
padding: 0 15px;
}
.mega-nav .mega-ul li a:hover, .mega-nav .mega-ul li:hover > a {
background: #333;
}
.mega-nav .mega-ul li:hover > .mega-div {
display: block;
}
.mega-div {
position: absolute;
top: 100%;
left: 0;
width: 450px;
height: auto;
padding: 20px 30px;
background: #333;
display: none;
z-index:1000;
}
.mega-ul li ul {
float: left;
width: 23%;
margin: 0 2% 15px 0;
padding: 0;
list-style: none;
}
.mega-ul li ul li {
display: block;
}
.mega-ul li ul li a {
float: left;
display: block;
width: 100%;
height: auto;
line-height: 1.3em;
color: #888;
text-decoration: none;
padding: 1px 0;
}
.mega-ul li ul li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
.mega-ul li ul li a:hover {
color: #fff;
background: none;
}
.mega-ul ul li:first-child a:hover {
color: #fff;
}
/* clearfix */
.mega-nav .mega-ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.mega-nav .mega-ul {
display: inline-block;
}
.header-title {
line-height: 59px;
}
Any help would be greate appreciated.

Answer 1

Fiddle
You can do this:
.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div{
right:0;
left:auto;
}
This way, starting from the 6th .mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div, it will align to right:0; going the other way.
This is thanks to nth-child(1n+6), which means starting from the 6th element, every one after has this property.
It's not the prettiest alternative, but you can mess around, making it left:-50%, or right:50%.
If you know how many you have and will always be that way and you know what one works where, you can just use :nth-child(n) and style that way. (n being the number in which that element appears).

Answer 2

Remove position relative from li tag
.mega-ul li {
display: inline-block;
position: relative; // remove it
}
http://jsfiddle.net/vxaAE/1/