Submenu and RTL


Author Message
Ahmad Hamdan

Posted: 12/14/2010
Quote message 

:-X

Dear All,

I have c reated a theme for a drupal web site using artisteer, for the wbesite i have created another arabic style page (RTL), i was able to fix everything excpet one point related to sub menus, i can't display them correctly under their menu item for the english page each sub menu is displayed correctly udner the menu item (i.e. the beginning and the ends of the submenus block starts and ends exactly at the beginning and the ends of the menu item


.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align: Right;
text-decoration: none;
outline: none;
letter-spacing: normal;
word-spacing: normal;

}

.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
float: right;
}

.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: right;
position: relative;
z-index: 5;
background: none;
}

.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}

.art-menu li li
{
float: right;}

.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
}

.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}

.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}

.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}

.art-menu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
float: right;
}




/* menu structure */

.art-menu
{
padding: 0 0 0 0;
}

.art-nav
{
position: relative;
height: 22px;
z-index: 100;
}

.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 22px;
background-image: url('images/nav.png');
}

.art-nav .l
{
left: 0;
right: 0;
}

.art-nav .r
{
right: 0;
width: 960px;
clip: rect(auto, auto, auto, 960px);
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
position: relative;
display: block;
overflow: hidden;
height: 22px;
cursor: pointer;
text-decoration: none;
}

.art-menu li
{
float:right;
text-align:center;
padding-right:1px;
margin-right: 2px;
margin-left: 0;
}

.art-menu ul li
{
margin:0;
clear: both;
}


.art-menu a .r, .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 66px;
background-image: url('images/menuitem.png');
}

.art-menu a .l
{
left: 0;
right: 0;
}

.art-menu a .r
{
width: 400px;
right: 0;
clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t
{
margin-right: 10px;
margin-left: 10px;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
color: #0A2E38;
padding-top:0px;
padding-bottom:0px;
padding-right:2px;
padding-Left:22px;
margin: 0 0;
line-height: 22px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top: -22px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top: -22px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top: -22px;
}
.art-menu a:hover .t
{
color: #F1F3F4;
}

.art-menu li:hover a .t
{
color: #F1F3F4;
}

.art-menu li:hover>a .t
{
color: #F1F3F4;
}

art-menu li
{
margin-right: {RightDistance}px !important;
margin-left: {LeftDistance}px !important;
}

/* end MenuItem */

/* begin MenuSeparator */
.art-nav .art-menu-separator
{
display: block;
width: 1px;
height: 22px;
background-image: url('images/menuseparator.png');
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
display: block;
text-align: right;
white-space: nowrap;
height: 26px;
width: 220px;
overflow: hidden;
line-height: 26px;
background-image: url('images/subitem.png');
background-position: top right;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #949494;
float:right;

}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: Center;
text-decoration: inherit;

}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: right;
text-indent: 12px;
line-height: 26px;
color: #0F4757;

float:right;

font-weight: bold;
font-size: 11px;
text-decoration: none;
padding-right:5px;

}


.art-menu ul li a:hover
{
color: #CBEDF6;
border-color: #25AFD4;
background-position: 0 -26px;
}

.art-menu ul li:hover>a
{
color: #CBEDF6;
border-color: #25AFD4;
background-position: 0 -26px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #CBEDF6;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #CBEDF6;
}


/* end MenuSubItem */



 
Lawrence

Posted: 12/14/2010
Quote message 

A link demonstrating what's happening would be great, we could open it in Chrome and edit the CSS from there and send you a code snippet or tell you what you need to change. :-)
 
Ahmad Hamdan

Posted: 12/15/2010
Quote message 

This is the english version:
http://www.cinet.com.kw/cinet/

and this is the Arabic version:
http://www.cinet.com.kw/cinet/ar

In the english version for example for the sub menu under About Us is looking O.K, the sub menus starts from the left and ends in the right

but in the arabic version for the sub menu udner the third & fourth items from the right, the sub menu always starts from the left and it's displayed correctly as we want , i.e. starts from the right and ends in the left
 
mal2moh

Posted: 6/29/2011
Quote message 

hi
please help me fot
correct submenu start from right and end in the left

thanks
 
Amir

Posted: 9/21/2013
Quote message 

How to correct submenu start from right and end in the left

 
Amir Milad

Posted: 6/2/2014
Quote message 

.desktop ul.art-hmenu>li>ul
{
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

Change it to

.desktop ul.art-hmenu>li>ul
{
padding: 10px 30px 30px 0px;
margin: -10px 0 0 -30px;
}