MyBB Community Forums

Hi
Guys i have a problem with my drop down menu!

With this drop down menu when i want to open menu with multy sub menu some of text get hidden from the menu .because the sub menu's opened from the middle of the main menu .

i want the menu's opened from the edge of main menu. as i showed on picture :



and this is my css:

.top-nav{background:url(newmenu/images/nav.png) repeat-x #323232;height:35px; width:100%; padding:0; text-align:right;}
.top-nav-link{margin: 0 auto;min-width:980px;width:99% !important; color:#8A8A8A; line-height:30px;-moz-transition: all 0.4s ease 0s;}
.top-nav-link:hover{color:#fff;moz-transition: all 0.4s ease 0s;}
.nav {margin-bottom: 15px;margin-right: 41px;}
.nav a {background: none repeat scroll 0 0 #CFCFD1;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;color: #000; margin: 1px; padding: 2px 6px;text-decoration: none;}         

#nav {
    margin:0;
    padding:0;
    list-style:none;
}
#nav li {
    float:right;
    display:block;
    position:relative;
    z-index:500;
    margin:0 4px;
}
#nav li a {
    display:block;
    padding:2px 3px;
	font-size:11px;
    height:31px;
    text-decoration:none;
    color:#8A8A8A;
    text-align:right;
	-moz-transition: all 0.9s linear 0s;
}
#nav li a:hover {
    color:#fff;
	-moz-transition: all 0.9s linear 0s;
}
#nav a.selected {
    color:#f00;
}
#nav ul {
    position:absolute;
    right:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:100px;
    float:right;
    border-top:1px solid #fff;
    position:relative;
	background:#fff;
}
#nav ul a {
    display:block;
    height:15px;
    padding: 8px 5px;
    color:#333333;
}
#nav ul a:hover {
    text-decoration:none;
	-moz-transition: all 0.3s ease-in-out 0s;
	color:#B71B0B;
}
*html #nav ul {
    margin:0 0 0 -2px;
}
#nav ul li ul {
    position:absolute;
    right:90px;
    top:-1px;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:160px;
    float:right;
	line-height:11px;
	background: none repeat scroll 0 0 #FFFFFF;
	/*opacity: 0.7;*/
	
}

Thank you.

.top-nav{background:url(newmenu/images/nav.png) repeat-x #323232;height:35px; width:100%; padding:0; text-align:right;}
.top-nav-link{margin: 0 auto;min-width:980px;width:99% !important; color:#8A8A8A; line-height:30px;-moz-transition: all 0.4s ease 0s;}
.top-nav-link:hover{color:#fff;moz-transition: all 0.4s ease 0s;}
.nav {margin-bottom: 15px;margin-right: 41px;}
.nav a {background: none repeat scroll 0 0 #CFCFD1;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;color: #000; margin: 1px; padding: 2px 6px;text-decoration: none;}         

#nav {
    margin:0;
    padding:0;
    list-style:none;
}
#nav li {
    float:right;
    display:block;
    position:relative;
    z-index:500;
    margin:0 4px;
}
#nav li a {
    display:block;
    padding:2px 3px;
    font-size:11px;
    height:31px;
    text-decoration:none;
    color:#8A8A8A;
    text-align:right;
    -moz-transition: all 0.9s linear 0s;
}
#nav li a:hover {
    color:#fff;
    -moz-transition: all 0.9s linear 0s;
}
#nav a.selected {
    color:#f00;
}
#nav ul {
    position:absolute;
    right:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:100px;
    float:right;
    border-top:1px solid #fff;
    position:relative;
    background:#fff;
}
#nav ul a {
    display:block;
    height:15px;
    padding: 8px 5px;
    color:#333333;
}
#nav ul a:hover {
    text-decoration:none;
    -moz-transition: all 0.3s ease-in-out 0s;
    color:#B71B0B;
}
*html #nav ul {
    margin:0 0 0 -2px;
}
#nav ul li ul {
    position:absolute;
    right:1px;
    top:-1px;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:160px;
    float:right;
    line-height:11px;
    background: none repeat scroll 0 0 #FFFFFF;
    /*opacity: 0.7;*/
    
}

Try that CSS, should do what you want.