Question

I’m using Ari Ext menu in my joomla 1.5 template for my top navigation bar and have edited as per my design. Everything works well in all modern browser except IE7 and above, it appears vertical
This is my css code below.

.ux-menu-init-hidden{
    visibility:hidden;
    position:absolute;}
.ux-menu-container{
    position:relative;
    border:0px solid black;
    background:#f3efec url(images/top.jpg) repeat;}
.ux-menu,.ux-menu ul{
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    line-height:1;
    border:0px solid black;
    color:#000000}
.ux-menu li{
    position:relative;
    float:left;
    color:#000000}
.ux-menu ul{
    position:absolute;
    top:0;
    left:0;
    color:#000000}
.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;
    z-index:-1;}
.ux-menu-vertical .ux-menu-item-main{
    clear:left;}
.ux-menu a{
    display:block;
    position:relative;
    text-decoration:none;
    color:#000000;
    border-left:1px solid #e3dad1;
    border-top:0px solid #e3dad1;
    border-bottom:0px solid #e3dad1;
    background:#f3efec url(images/top.jpg) repeat;
    font-size:12px;
    line-height:12px;
    padding:10px 18px;
    height:10px;
    border-bottom:0px solid black;
}
.ux-menu ul li a{
    display:block;
    position:relative;
    text-decoration:none;
    color:#000000;
    border-left:1px solid #e6e6e6;
    border-right:1px solid #e6e6e6;
    background:#ffffff;
    font-size:11px;
    line-height:12px;
    padding:10px 14px;
    font-weight:normal;
}
.ux-menu ul li ul{border:0px solid black; margin-left:-1px}
.ux-menu li{border:0px solid red;}
.ux-menu ul li a.ux-menu-link-last{
    border-bottom:1px solid #e6e6e6;}
.ux-menu ul li a.ux-menu-link-first{
    border-top:1px solid #e6e6e6;}
.ux-menu a:focus,.ux-menu a:hover,.ux-menu a.ux-menu-link-hover{
    border-color:#d2e3f4;
    background:url(images/hover.jpg) repeat;
    outline:0;
    text-decoration:none}
.ux-menu ul li a:focus,.ux-menu ul li a:hover, ux-menu ul li a.ux-menu-link-hover{
    background:#ffffff;
    text-decoration:none;
    }

.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:0;
    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: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;}
.ux-menu a.current{
    background-image:url('images/hover.jpg');
}
.ux-menu ul li a.current{
    background:#ffffff
}

Answer 1

Try to use the original css style from “ARI Ext menu” module: http://www.demo2.ari-soft.com/modules/mod_ariextmenu/mod_ariextmenu/js/css/menu.min.css . This style, works OK in IE.