[LEFT]<link href="menu.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
            Ext.onReady(function() {
                new Ext.ux.Menu('simple-horizontal-menu', {
                    transitionType: 'slide',
                    direction: 'horizontal', // default
                    delay: 0.2,              // default
                    autoWidth: true,         // default
                    transitionDuration: 0.3, // default
                    animate: true,           // default
                    currentClass: 'current'  // default
                });
                new Ext.ux.Menu('simple-vertical-menu', {
                    direction: 'vertical'
                });
            });
        </script>[/LEFT]

[LEFT]<ul id="simple-horizontal-menu">
    <li><a href="#">عنصر قائمة رئيسية 1</a></li>
    <li><a href="#">عنصر قائمة رئيسية 2</a></li>
    <li><a href="#">عنصر قائمة رئيسية 3</a>
    <ul>
        <li><a href="#">عنصر قائمة داخلية 1</a></li>
        <li><a href="#">عنصر قائمة داخلية 2</a></li>
        <li><a href="#">عنصر قائمة داخلية 3</a></li>
    </ul>
    </li>
    <li><a href="#">عنصر قائمة رئيسية 4</a>
        <ul>
        <li><a href="#">عنصر قائمة داخلية 4</a></li>
        <li><a href="#">عنصر قائمة داخلية 5</a>
        <ul>
            <li><a href="#">عنصر قائمة داخلية 1</a></li>
            <li><a href="#">عنصر قائمة داخلية 2</a></li>
            <li><a href="#">عنصر قائمة داخلية 3</a></li>
        </ul>
        </li>
        <li><a href="#">عنصر قائمة داخلية 6</a></li>
    </ul>
    </li>
</ul>[/LEFT]

[LEFT]        <li><a href="#">عنصر قائمة داخلية 5</a>
        <ul>
            <li><a href="#">عنصر قائمة داخلية 1</a></li>
            <li><a href="#">عنصر قائمة داخلية 2</a></li>
            <li><a href="#">عنصر قائمة داخلية 3</a></li>
        </ul>
        </li>
[/LEFT]

[LEFT]<ul id="simple-vertical-menu">
    <li><a href="#">تجربة</a>
    <ul>
        <li><a href="#">عنصر قائمة داخلية 1</a></li>
        <li><a href="#">عنصر قائمة داخلية 2</a>
        <ul>
            <li><a href="#">sub عنصر قائمة داخلية 1</a></li>
            <li><a href="#">sub عنصر قائمة داخلية 2</a></li>
            <li><a href="#">sub عنصر قائمة داخلية 3</a></li>
        </ul>
        </li>
        <li><a href="#">عنصر قائمة داخلية 3</a></li>
    </ul>
    </li>
    <li><a href="#">عنصر قائمة رئيسية 2</a></li>
    <li><a href="#">عنصر قائمة رئيسية 3</a>
    <ul>
        <li><a href="#">عنصر قائمة داخلية 4</a></li>
        <li><a href="#">عنصر قائمة داخلية 5</a></li>
        <li><a href="#">عنصر قائمة داخلية 6</a></li>
    </ul>
    </li>
    <li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>[/LEFT]

[LEFT]body{
direction: rtl;
}

.ux-menu-container {
    position: relative;
}

.ux-menu,
.ux-menu ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.ux-menu li {
    position: relative;
    float: right;
}

.ux-menu ul {
    position: absolute;
    top: 0;
    left: 0;
}

.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    zoom: 1;
    z-index: -1;
    filter:mask();
}

.ux-menu-vertical .ux-menu-item-main {
    clear: left;
}

.ux-menu a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #432;
    border-left: 1px solid #e3dad1;
    border-top: 1px solid #e3dad1;
    border-bottom: 1px solid #e3dad1;    
    background: #f3efec url('images/menu-item-bg.png') repeat;
    font-size: 12px;
    line-height: 12px;
    padding: 10px 14px;
}

.ux-menu a.ux-menu-link-last {
    border-right: 1px solid #e3dad1;
}

ux.menu ul a {
    width: 100%;
}

.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
    border-color: #d2e3f4;
    background: url(images/'menu-item-bg-over.png') repeat;
    outline: 0;
}

.ext-ie .ux-menu-clearfix {
    zoom: 1;
}

.ux-menu-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.ux-menu a.ux-menu-link-parent {
    padding-right: 24px;
    min-width: 1px;
}

.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
    border-bottom: 0px;    
    border-right: 1px solid #e3dad1;
}

.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
    border-bottom: 1px solid #e3dad1;
}

.ux-menu-arrow {
    display: block;
    width: 8px;
    height: 6px;
    right: 10px;
    top: 14px;
    position: absolute;
    background: url('images/menu-arrow-down.png') no-repeat;
    font-size: 0;
}

.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow  {
    width: 6px;
    height: 8px;
    top: 13px; 
    background: url('images/menu-arrow-right.png') no-repeat;
}

.ext-border-box .ux-menu-arrow {
    top: 17px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
    top: 16px;
}

.ux-menu ul.ux-menu-hidden {
    display: none;
}[/LEFT]