Please help someone to solve the drop down menu issue

**KILLERR** · Jun 29, 2011 01:58

I'm a newbie in webdesigning & programming, I'm trying to make a website with semi transparent drop down menu, when i'm changing the webpage to center, sub menus are not working fine.

Everything is fine, when the page is in left
check this link

When the webpage is in center, sub menus are not positioning correctlycheck this link

I dont have that much idea about CSS and all
Please help someone to solve the issue,

**ralph.m** · Jun 29, 2011 02:10

Hi KILLERR. Welcome to SitePoint.

To be honest, there are much better ways to do a dropdown list.

Anyhow, what are you using to create the submenu? Is it a program? The left-hand settings on those sub menus differ from page to page. How is this being created?

**KILLERR** · Jun 29, 2011 04:03

Originally Posted by ralph.m

Hi KILLERR. Welcome to SitePoint.

To be honest, there are much better ways to do a dropdown list.

Anyhow, what are you using to create the submenu? Is it a program? The left-hand settings on those sub menus differ from page to page. How is this being created?

thanks ralph.m.......

i just copied from another website like code, images etc. I need to make a same transparent drop down menu. Is that possible?

**Paul O'B** · Jun 30, 2011 13:59

Hi,

That's an ancient script and not the best way to make a dropdowns these days. That page also has loads of errors and a doctype that sends IE into spasms.

There's too much for me to tidy up at the moment and would be easier to start from scratch than try to fix that page I'm afraid.

You can get the menu working though by closing the table and the divs properly after the menu. The submenu should not be nested in any main containers or it gets its positions wrong.

This is what the bottom of the menu should look like.

Code:

                            <td class="last38"><a id="menu3852" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                        </tr>
                    </table>
                </div></td>
        </tr>
    </table>
</div>
<div id="subwrap38">
    <script type="text/javascript">
<!--

You probably also need to move the flash inside the container. Here's the whole code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Web Page Maker">
<style type="text/css">
div#container {
    position:relative;
    width: 1024px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
}
body {
    text-align:center;
    margin:0
}
</style>
<style type='text/css'>
<!--
.transMenu38 {
    position:absolute;
    overflow:hidden;
    left:-1000px;
    top:-1000px;
}
.transMenu38 .content {
    position:absolute;
}
.transMenu38 .items {
    width: 160px;
    border: 0px solid;
    position:relative;
    left:0px;
    top:0px;
    z-index:2;
}
.transMenu38 td {
    padding: 5px 5px 5px 5px !important;
    font-size: 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    font-weight: normal !important;
    color: #000000 !important;
}
#subwrap38 {
    text-align: left;
}
.transMenu38 .item.hover td {
    color: #FFffff !important;
}
.transMenu38 .item {
    height: 20px;
    text-decoration: none;
    cursor:pointer;
}
.transMenu38 .background {
    background-color: #ffffff !important;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .shadowRight {
    position:absolute;
    z-index:3;
    top:-3000px;
    width:2px;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .shadowBottom {
    position:absolute;
    z-index:1;
    left:-3000px;
    height:2px;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .item.hover {
    background-color: #666666 !important;
}
.transMenu38 .item img {
    margin-left:10px !important;
}
table.menu38 {
    top: 0px;
    left: 0px;
    position:relative;
    margin:0px !important;
    border: 0px solid;
    z-index: 1;
}
table.menu38 a {
    margin:0px !important;
    padding: 5px 5px 5px 5px !important;
    display:block !important;
    position:relative !important;
}
div.menu38 a, div.menu38 a:visited, div.menu38 a:link {
    font-size: 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    font-weight: normal !important;
    text-decoration: none !important;
    margin-bottom:0px !important;
    display:block !important;
    white-space:nowrap;
}
div.menu38 td {
    border-bottom: 0px solid;
    border-top: 0px solid;
    border-left: 0px solid;
    background-color: #FFFFFF !important;
}
div.menu38 td.last38 {
    border-right: 0px solid;
}
#trans-active38 a {
    background-color: #FFFFFF !important;
}
#menu38 a.hover {
    background-color: #FFFFFF !important;
    display:block;
}
#menu38 span {
    display:none;
}
#menu38 a img.seq1, .transMenu38 img.seq1, {
 display:    inline;
}
#menu38 a.hover img.seq2, .transMenu38 .item.hover img.seq2 {
    display:   inline;
}
#menu38 a.hover img.seq1, #menu38 a img.seq2, .transMenu38 img.seq2, .transMenu38 .item.hover img.seq1 {
    display:   none;
}
#trans-active38 a img.seq1 {
    display: none;
}
#trans-active38 a img.seq2 {
    display: inline;
}
#subwrap38 #TransMenu0-0 {
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none;
    white-space: normal;
    text-indent: 0px;
    padding: 5px 5px 5px 5px !important;
    font-size: 12px !important;
    font-style: left !important;
    font-weight: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu0-0, #subwrap38 #TransMenu0-0:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-1 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu0-1, #subwrap38 #TransMenu0-1:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-2 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu0-2, #subwrap38 #TransMenu0-2:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-3 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu0-3, #subwrap38 #TransMenu0-3:hover {;
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu1-0 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-0, #subwrap38 #TransMenu1-0:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu1-1 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-1, #subwrap38 #TransMenu1-1:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu1-2 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-2, #subwrap38 #TransMenu1-2:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu1-3, #subwrap38 #TransMenu1-3:hover {
}
#subwrap38 #TransMenu2-0 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-0, #subwrap38 #TransMenu2-0:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu2-1 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-1, #subwrap38 #TransMenu2-1:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu2-2 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-2, #subwrap38 #TransMenu2-2:hover {
    border-bottom: 1px solid #333333 !important
}
-->
</style>
</head>
<body background="http://www.ftplogin.info/menu/images/bg.jpg" bgColor="#C0C0C0">
<div id="container">
    <div id="image1" style="position:absolute; overflow:hidden; left:-13px; top:-1px; width:145px; height:126px; z-index:0"><img src="http://www.ftplogin.info/menu/images/paste47.jpg" alt="" title="" border=0 width=145 height=126></div>
    <table width="1024" border="0" cellspacing="2" cellpadding="2">
        <tr> <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <td valign="center" width="100%"><!--swMenuPro6.0 transmenu-->
                <script type="text/javascript" src="http://www.ftplogin.info/menu/images/transmenu_Packed.js"></script>
                <div id="wrap38" class="menu38" align="left">
                    <table cellspacing="0" cellpadding="0" id="menu38" class="menu38" >
                        <tr>
                            <td id='trans-active38'><a id="menu381" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td><a id="menu3826" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td><a id="menu3847" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td><a id="menu3828" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td><a id="menu3848" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td><a id="menu3839" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            <td class="last38"><a id="menu3852" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                        </tr>
                    </table>
                </div></td>
        </tr>
    </table>
    <div id="html1" style="position:absolute; overflow:hidden; left:0px; top:172px; width:1006px; height:444px; z-index:1;">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,0,0" width="1006" height="424">
            <param name="movie" value="http://www.ftplogin.info/menu/newmain.swf" />
            <param name="wmode" value="transparent" />
            <param name="play" VALUE="true" />
            <param name="loop" VALUE="true" />
            <param name="quality" value="low" />
            <embed src="http://www.ftplogin.info/menu/newmain.swf" quality="low" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" width="1006" height="424"> </embed>
        </object>
    </div>
</div>
<div id="subwrap38">
    <script type="text/javascript">
<!--
if (TransMenu.isSupported()) {
var ms = new TransMenuSet(TransMenu.direction.down, 0,4, TransMenu.reference.bottomLeft);
var menu3826 = ms.addMenu(document.getElementById("menu3826"));
 menu3826.addItem("Submenu1", "#", "0");
menu3826.addItem("Submenu2", "#", "0");
menu3826.addItem("Submenu3", "#", "0");
menu3826.addItem("Submenu4", "#", "0");
menu3826.addItem("Submenu5", "#", "0");
menu3826.addItem("Submenu6", "#", "0");
var menu3847 = ms.addMenu(document.getElementById("menu3847"));
 menu3847.addItem("Submenu1", "#", "0");
menu3847.addItem("Submenu2", "#", "0");
menu3847.addItem("Submenu3", "#", "0");
menu3847.addItem("Submenu4", "#", "0");
var menu3848 = ms.addMenu(document.getElementById("menu3848"));
 menu3848.addItem("Submenu1", "#", "0");
menu3848.addItem("Submenu2", "#", "0");
menu3848.addItem("Submenu3", "#", "0");
menu3848.addItem("Submenu4", "#", "0");
function init38() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
document.getElementById("menu381").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu381").onmouseout = function() { this.className = ""; }
menu3826.onactivate = function() {document.getElementById("menu3826").className = "hover"; };
 menu3826.ondeactivate = function() {document.getElementById("menu3826").className = ""; };
 menu3847.onactivate = function() {document.getElementById("menu3847").className = "hover"; };
 menu3847.ondeactivate = function() {document.getElementById("menu3847").className = ""; };
 document.getElementById("menu3828").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3828").onmouseout = function() { this.className = ""; }
menu3848.onactivate = function() {document.getElementById("menu3848").className = "hover"; };
 menu3848.ondeactivate = function() {document.getElementById("menu3848").className = ""; };
 document.getElementById("menu3839").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3839").onmouseout = function() { this.className = ""; }
document.getElementById("menu3852").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3852").onmouseout = function() { this.className = ""; }
}}
TransMenu.spacerGif = "http://www.ftplogin.info/menu/images/x.gif";
TransMenu.dingbatOn = "http://www.ftplogin.info/menu/images/submenu-on.gif";
TransMenu.dingbatOff = "http://www.ftplogin.info/menu/images/submenu-off.gif";
TransMenu.sub_indicator = true;
TransMenu.menuPadding = 0;
TransMenu.itemPadding = 0;
TransMenu.shadowSize = 2;
TransMenu.shadowOffset = 3;
TransMenu.shadowColor = "#888";
TransMenu.shadowPng = "http://www.ftplogin.info/menu/images/grey-40.png";
TransMenu.backgroundColor = "#ffffff";
TransMenu.backgroundPng = "http://www.ftplogin.info/menu/images/white-90.png";
TransMenu.hideDelay = 600;
TransMenu.slideTime = 300;
TransMenu.modid = 38;
TransMenu.selecthack = 0;
TransMenu.autoposition = 0;
TransMenu.renderAll();
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", init38, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", init38 );
}else{
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
init38();
}
}else
window.onload = init38();
}
}
-->
</script>
</div>
</body>
</html>

But in all honesty you would be better off using the suckerfish menu (enhanced with superfish if you need the extras) and then dropping the tables and using css for the layout. There's no need for all those nested table and a simple wrapper and menu in a un-ordered list would do.

**Paul O'B** · Jun 30, 2011 14:16

Here's the layout without the table and still using your menu (but I haven't touched most of the css).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.ftplogin.info/menu/images/transmenu_Packed.js"></script>
<style type="text/css">
html, body {
    text-align:center;
    margin:0;
    padding:0;
}
body {
    background:#c0c0c0 url(http://www.ftplogin.info/menu/images/bg.jpg) repeat-x 0 0;
}
#container {
    position:relative;
    width: 1008px;
    margin:100px auto 20px;
    text-align:left;
}
#flash {
    position:relative;
    overflow:hidden;
    width:1006px;
    height:444px;
    z-index:1;
    border:1px solid #000;
    clear:both;
}
.menu38 {
    margin:0 0 0 10px;
    padding:0;
    list-style:none;
    float:left;
}
.menu38 li, .menu38 a, .menu38 img {
    float:left;
}
.transMenu38 {
    position:absolute;
    overflow:hidden;
    left:-1000px;
    top:-1000px;
}
.transMenu38 .content {
    position:absolute;
}
.transMenu38 .items {
    width: 160px;
    border: 0px solid;
    position:relative;
    left:0px;
    top:0px;
    z-index:2;
}
.transMenu38 td {
    padding: 5px 5px 5px 5px !important;
    font-size: 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    font-weight: normal !important;
    color: #000000 !important;
}
#subwrap38 {
    text-align: left;
}
.transMenu38 .item.hover td {
    color: #FFffff !important;
}
.transMenu38 .item {
    height: 20px;
    text-decoration: none;
    cursor:pointer;
}
.transMenu38 .background {
    background-color: #ffffff !important;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .shadowRight {
    position:absolute;
    z-index:3;
    top:-3000px;
    width:2px;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .shadowBottom {
    position:absolute;
    z-index:1;
    left:-3000px;
    height:2px;
    opacity:0.6;
    filter:alpha(opacity=60)
}
.transMenu38 .item.hover {
    background-color: #666666 !important;
}
.transMenu38 .item img {
    margin-left:10px !important;
}
table.menu38 {
    top: 0px;
    left: 0px;
    position:relative;
    margin:0px !important;
    border: 0px solid;
    z-index: 1;
}
table.menu38 a {
    margin:0px !important;
    padding: 5px 5px 5px 5px !important;
    display:block !important;
    position:relative !important;
}
div.menu38 a, div.menu38 a:visited, div.menu38 a:link {
    font-size: 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    font-weight: normal !important;
    text-decoration: none !important;
    margin-bottom:0px !important;
    display:block !important;
    white-space:nowrap;
}
div.menu38 td {
    border-bottom: 0px solid;
    border-top: 0px solid;
    border-left: 0px solid;
    background-color: #FFFFFF !important;
}
div.menu38 td.last38 {
    border-right: 0px solid;
}
#trans-active38 a {
    background-color: #FFFFFF !important;
}
#menu38 a.hover {
    background-color: #FFFFFF !important;
    display:block;
}
#menu38 span {
    display:none;
}
#menu38 a img.seq1, .transMenu38 img.seq1, {
 display:    inline;
}
#menu38 a.hover img.seq2, .transMenu38 .item.hover img.seq2 {
    display:   inline;
}
#menu38 a.hover img.seq1, #menu38 a img.seq2, .transMenu38 img.seq2, .transMenu38 .item.hover img.seq1 {
    display:   none;
}
#trans-active38 a img.seq1 {
    display: none;
}
#trans-active38 a img.seq2 {
    display: inline;
}
#subwrap38 #TransMenu0-0 {
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none;
    white-space: normal;
    text-indent: 0px;
    padding: 5px 5px 5px 5px !important;
    font-size: 12px !important;
    font-style: left !important;
    font-weight: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
/*    border-bottom: 1px solid #333333 !important;*/
}
/*
#subwrap38 .item.hover #TransMenu0-0, #subwrap38 #TransMenu0-0:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-1 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu0-1, #subwrap38 #TransMenu0-1:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-2 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu0-2, #subwrap38 #TransMenu0-2:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu0-3 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu0-3, #subwrap38 #TransMenu0-3:hover {;
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu1-0 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-0, #subwrap38 #TransMenu1-0:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu1-1 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-1, #subwrap38 #TransMenu1-1:hover {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 #TransMenu1-2 {
    border-bottom: 1px solid #333333 !important;
}
#subwrap38 .item.hover #TransMenu1-2, #subwrap38 #TransMenu1-2:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu1-3, #subwrap38 #TransMenu1-3:hover {
}
#subwrap38 #TransMenu2-0 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-0, #subwrap38 #TransMenu2-0:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu2-1 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-1, #subwrap38 #TransMenu2-1:hover {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 #TransMenu2-2 {
    border-bottom: 1px solid #333333 !important
}
#subwrap38 .item.hover #TransMenu2-2, #subwrap38 #TransMenu2-2:hover {
    border-bottom: 1px solid #333333 !important
}
*/
</style>
</head>
<body>
<div id="container">
    <ul id="menu38" class="menu38" >
        <li id='trans-active38'> <a id="menu381" href="#" ><img class="seq1"   src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class="seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
        <li><a id="menu3826" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
        <li> <a id="menu3847" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
        <li><a id="menu3828" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class="seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
        <li><a id="menu3848" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
        <li><a id="menu3839" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
        <li class="last38"><a id="menu3852" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
    </ul>
    <div id="flash">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,0,0" width="1006" height="424">
            <param name="movie" value="http://www.ftplogin.info/menu/newmain.swf" />
            <param name="wmode" value="transparent" />
            <param name="play" VALUE="true" />
            <param name="loop" VALUE="true" />
            <param name="quality" value="low" />
            <embed src="http://www.ftplogin.info/menu/newmain.swf" quality="low" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" width="1006" height="424"> </embed>
        </object>
    </div>
</div>
<div id="subwrap38">
    <script type="text/javascript">
<!--
if (TransMenu.isSupported()) {
var ms = new TransMenuSet(TransMenu.direction.down, 0,4, TransMenu.reference.bottomLeft);
var menu3826 = ms.addMenu(document.getElementById("menu3826"));
 menu3826.addItem("Submenu1", "#", "0");
menu3826.addItem("Submenu2", "#", "0");
menu3826.addItem("Submenu3", "#", "0");
menu3826.addItem("Submenu4", "#", "0");
menu3826.addItem("Submenu5", "#", "0");
menu3826.addItem("Submenu6", "#", "0");
var menu3847 = ms.addMenu(document.getElementById("menu3847"));
 menu3847.addItem("Submenu1", "#", "0");
menu3847.addItem("Submenu2", "#", "0");
menu3847.addItem("Submenu3", "#", "0");
menu3847.addItem("Submenu4", "#", "0");
var menu3848 = ms.addMenu(document.getElementById("menu3848"));
 menu3848.addItem("Submenu1", "#", "0");
menu3848.addItem("Submenu2", "#", "0");
menu3848.addItem("Submenu3", "#", "0");
menu3848.addItem("Submenu4", "#", "0");
function init38() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
document.getElementById("menu381").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu381").onmouseout = function() { this.className = ""; }
menu3826.onactivate = function() {document.getElementById("menu3826").className = "hover"; };
 menu3826.ondeactivate = function() {document.getElementById("menu3826").className = ""; };
 menu3847.onactivate = function() {document.getElementById("menu3847").className = "hover"; };
 menu3847.ondeactivate = function() {document.getElementById("menu3847").className = ""; };
 document.getElementById("menu3828").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3828").onmouseout = function() { this.className = ""; }
menu3848.onactivate = function() {document.getElementById("menu3848").className = "hover"; };
 menu3848.ondeactivate = function() {document.getElementById("menu3848").className = ""; };
 document.getElementById("menu3839").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3839").onmouseout = function() { this.className = ""; }
document.getElementById("menu3852").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("menu3852").onmouseout = function() { this.className = ""; }
}}
TransMenu.spacerGif = "http://www.ftplogin.info/menu/images/x.gif";
TransMenu.dingbatOn = "http://www.ftplogin.info/menu/images/submenu-on.gif";
TransMenu.dingbatOff = "http://www.ftplogin.info/menu/images/submenu-off.gif";
TransMenu.sub_indicator = true;
TransMenu.menuPadding = 0;
TransMenu.itemPadding = 0;
TransMenu.shadowSize = 2;
TransMenu.shadowOffset = 3;
TransMenu.shadowColor = "#888";
TransMenu.shadowPng = "http://www.ftplogin.info/menu/images/grey-40.png";
TransMenu.backgroundColor = "#ffffff";
TransMenu.backgroundPng = "http://www.ftplogin.info/menu/images/white-90.png";
TransMenu.hideDelay = 600;
TransMenu.slideTime = 300;
TransMenu.modid = 38;
TransMenu.selecthack = 0;
TransMenu.autoposition = 0;
TransMenu.renderAll();
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", init38, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", init38 );
}else{
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
init38();
}
}else
window.onload = init38();
}
}
-->
</script>
</div>
</body>
</html>

Still miles too much code though.

**KILLERR** · Jun 30, 2011 22:09

thanks alot paul for ur support
Still problem..............
is there any other program or software to make the semi transparent drop down menu?

**Paul O'B** · Jul 1, 2011 00:55

Originally Posted by KILLERR

thanks alot paul for ur support
Still problem..............

No there is no problem in my versions - just copy and paste my code and view in a browser and you will see it working immediately.

If its not working for you then you have copied it incorrectly or not quite understood what to do.

I've looked at your page again and you haven't made the changes I specified. I spent a lot of time on this and I know it is working and as I say just grab the code from my post save in notepad and then run in a browser and it will work immediately. You can then determine where your page differs from my code and get it working.

There's no point in throwing some different code at this until you tidy up the page and have a valid structure so that things have a small chance of working correctly

**KILLERR** · Jul 1, 2011 15:57

Thanks alot Paul'O'B

Now, submenus are working fine, but in menu blue border is coming, how can i remove this?

**ralph.m** · Jul 1, 2011 16:26

Could you provide an up-to-date link so we can see what you are talking about?

**KILLERR** · Jul 2, 2011 11:33

Originally Posted by ralph.m

Could you provide an up-to-date link so we can see what you are talking about?

check this link

**ralph.m** · Jul 2, 2011 17:05

Try adding this to your style sheet:

Code:

#menu38 img {
    border: none;
}

**KILLERR** · Jul 3, 2011 00:24

Originally Posted by ralph.m

Try adding this to your style sheet:

Code:

#menu38 img {
    border: none;
}

thanks alot ralph.m & paul everything is working fine now

**KILLERR** · Nov 23, 2011 06:31

I have a problem with my arabic menu. In Internet explorer everything is working fine. When i open in other browers like chrome or safari. Menu's position is totally changing.

please open in internet explorer and chrome or any other browsers to see the difference

this is the link http://www.royalholidays-kw.com/menu/arabictest.php

**Paul O'B** · Nov 23, 2011 07:31

If you just mean the top position of the menu then its because of a collsping margin here:

Code:

#container {
    margin: 0 auto 20px;

Change the 20px to zero and the menu should sit on the image better.

Code:

#container {
    margin: 0 auto;

You do have deeper issues though and you are serving the page in quirks mode due to the shortened doctype and that BOM that you have output before it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Remove the BOM and then use a full doctype.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Reverting to standards mode may have far reaching consequences on an already built page, however you should not code in quirks mode in this day and age.

**KILLERR** · Nov 23, 2011 07:51

Thanks alot Paul its working fine
One more question -
how can change the scroll bar from right to left?
When i put "<html dir="rtl" lang="ar">" scroll bar is coming left but again menu is having some problem.

**Paul O'B** · Nov 23, 2011 09:17

HI, I don't have much experience with rtl but you could try setting the menu back to ltr.

e.g.

Code:

#html1{direction:ltr}

**KILLERR** · Nov 23, 2011 23:56

Thanks paul........
Now working, But sub menus are coming on the center. Is there any way to change that text to left.
Please check the link http://www.royalholidays-kw.com/menu/arabictest.php

**Paul O'B** · Nov 24, 2011 03:36

It looks as though the text is aligned left but you have some padding on it.

Code:

#subwrap38 #TransMenu0-0 {
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 12px !important;
    padding: 5px !important;
    text-align: left !important;
    text-decoration: none !important;
    text-indent: 0;
    text-transform: none;
    white-space: normal;
}
arabictest.php# (line 177)
.transMenu38 td {
    color: #000000 !important;
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    padding: 5px !important;
    text-align: left !important;
}

Try changing that padding to have no left or right padding e.g padding:5px 0!important

**ralph.m** · Nov 24, 2011 06:38

There also seems to be a square table cell to the left.

**KILLERR** · Dec 18, 2011 07:26

When i'm zooming the menu, this menu is going to right side, how can i solve this issue please help me
this is link http://www.royalholidays-kw.com/menu/arabictest.php

**Paul O'B** · Dec 18, 2011 08:30

Hi,

The main problem is that your nav is not connected to the rest of the page. You have just placed it absolutely 400px from the left. If I have my screen open wide the nav is placed in the wrong place.

Try soemthing like this:

Code:

#html1 {
	height: 249px;
	left: auto!important;
	margin: auto!important;
	overflow: hidden;
	position: relative!important;
	top: 75px;
	width: 1008px;
	direction: ltr;
}
.menu38 {
	margin: 0 0 0 100px;
	float:none;
}

It may help with the zoom also.

Note that you can't use ids more than once as they are unique. Use classes if you want to re-use styles.

**KILLERR** · Dec 19, 2011 00:53

thanks paul for your support, i inserted your code, still problem, is there any other way to solve this issue?

**xhtmlcoder** · Dec 19, 2011 04:31

You usually add dir="rtl" to the html tag any time the overall page direction is right-to-left even though Unicode is supposed to sort that out.

Do not use CSS styling to control directionality in HTML you should use markup as directionality is an integral part of the document structure and needs to be persistent.

Better still this might help; http://www.w3.org/International/tutorials/bidi-xhtml/

**Paul O'B** · Dec 19, 2011 04:42

I think you'd need to redesign a bit because at the moment you have separate elements all going their own way. You should have then all in in a container so that they move as a whole. However that still doesn't mean that zoom will do odd things especially with the rtl ltr arrangements in there. It's probably the ltr on the nav that makes it zoom the opposite way to the rest of the page.

However with the new code it looks better than before.

User Tag List

Thread: Please help someone to solve the drop down menu issue

Thread Tools

Display

Please help someone to solve the drop down menu issue

Bookmarks

Bookmarks

Posting Permissions