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 */



 
Amir

Posted: 9/21/2013
Quote message 

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