RTL vertical Menu

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
10/14/2009 4:22:48 AM
ashian
Gravatar
Total Posts 104
View Posts

RTL vertical Menu

Hi,

I have a problem by AspNet-Menu-Vertical on IE7, When I try to use it on RTL pages , menu disappear when mouse moves over it.

It works on IE8 or firefox but I can't manage it on IE7


div.AspNet-Menu-Vertical{
 margin: 1px 0px 0px 0px;
 width:100%;
 float: right;
 padding: 0px 0px 0px 0px;
 background-color: inherit;
 background-color: #EAF5CB;
 border:thin navy dashed

}
div.AspNet-Menu-Vertical ul.AspNet-Menu
{ position:relative; top: -6px; right: -30px;  }
div.AspNet-Menu-Vertical ul.AspNet-Menu ul
{ margin: 0; padding: 0; display: none; }
div.AspNet-Menu-Vertical ul.AspNet-Menu li img { display:none; }
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul ul
{ display: none; }

div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li li li:hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li li.AspNet-Menu-Hover ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li li li li li li li li li li li.AspNet-Menu-Hover ul   
{ display: block; }

div.AspNet-Menu-Vertical ul.AspNet-Menu ul
{position:relative; right: 0px; top: -20px; float:right}

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Leaf > a  ,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-SelectedLeaf  > a
{ background-image: none; }

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-WithChildren > a
{background-color: #f2f2f2 ; background-image: url('arrow.png');
 background-repeat:no-repeat; background-position:right;
 width: 160px; display: block; font-weight: bold;text-decoration:none; 
 padding: 2px 5px 2px 10px;color: #333;border-left: 5px solid #CCC; 
 min-height: 18px; }
 
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-SelectedWithChildren > a,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-WithChildren > a:hover
{background-color: #ECECEC ; background-image: url('arrowRight.gif');
 background-repeat:no-repeat; background-position:right;width: 160px; }
 
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-ChildSelected > a
{background-color: #f2f2f2 ; background-image: url('arrowRight.gif');
 background-repeat:no-repeat; background-position:right;
 padding:2px 1px 2px 1px;color: #339900;border-left:5px solid #72A545;
 width: 170px;}
 
div.AspNet-Menu-Vertical ul.AspNet-Menu a.AspNet-Menu-SelectedLeaf
{ padding:2px 1px 2px 1px;background: #f2f2f2;color: #339900;
 border-left:5px solid #72A545;width: 160px;}

div.AspNet-Menu-Vertical ul.AspNet-Menu a.AspNet-Menu-Leaf
{ display: block;font-weight: bold;text-decoration:none; 
padding: 2px 1px 2px 1px;background: #f2f2f2;color: #333;
border-left: 5px solid #CCC;min-height: 18px;width: 170px; }

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Leaf,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-WithChildren
{border: 1px solid #f2f2f2; border-bottom:solid 1px white;
 clear:right; float:right;list-style:none;margin: 0px 0px 0px 0px;
}

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Leaf a.AspNet-Menu {
 display: block;font-weight: bold;text-decoration:none; 
padding: 2px 1px 2px 1px;background: #f2f2f2;color: #333;
border-right: 5px solid #CCC;min-height: 18px;width: 180px; clear:both;}

* html body div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Leaf a.AspNet-Menu
{clear:right; height: 18px; width: 170px;}

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Leaf a.AspNet-Menu:hover,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-WithChildren a.AspNet-Menu:hover
 {padding:2px 1px 2px 1px;background: #f2f2f2;color: #339900;
 border-right:5px solid #72A545;width: 180px; }

Live demo : http://www.passillo.ir/پروژه-ها.aspx

Please help me how can I fix this problem

10/14/2009 4:33:07 AM
Przemek Lopaciuk
Gravatar
Total Posts 37
View Posts

Re: RTL vertical Menu

Try to include your css settings in this file: IE7Specific.css. I had the same problem. After including all css settings for menu in this file my problems vanished :).

 

Hope it helps.

Przemek

10/14/2009 11:28:33 AM
ashian
Gravatar
Total Posts 104
View Posts

Re: RTL vertical Menu

Thanks for your reply , I did it but not work for me

10/14/2009 1:01:28 PM
Joe Davis
Gravatar
Total Posts 2239
View Posts

Re: RTL vertical Menu

I think the code below is applying to the entire menu when using IE7, not just the nested ULs. You should try using the IE7Specific.css file to force different css for the menu in IE7.

div.AspNet-Menu-Vertical ul.AspNet-Menu ul
{ margin: 0; padding: 0; display: none; }
div.AspNet-Menu-Vertical ul.AspNet-Menu li img { display:none; }
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul,
div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul ul
{ display: none; }

I know Przemek already suggested the IE7Specific.css file but I am suggesting that you modify just the code above. Play with it a bit, first try setting display: block; and see if that makes any difference.

HTH,
Joe D.

10/14/2009 4:01:08 PM
ashian
Gravatar
Total Posts 104
View Posts

Re: RTL vertical Menu

thanks for your reply

Finally I find the solution:

I add rows below to StyleMenu.css and didnt need to change IE7Specific.css

div.AspNet-Menu-Vertical ul.AspNet-Menu,
div.AspNet-Menu-Vertical ul.AspNet-Menu  ul {width: 180px }

You must sign in to post in the forums. This thread is closed to new posts.