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,
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?
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.
<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>
[B] </tr>
</table>
</div></td>
</tr>
</table>
</div>
<div id[/B]="subwrap38">
<script type="text/javascript">
<!--
You probably also need to move the flash inside the container. Here’s the whole 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 [URL=“http://users.tpg.com.au/j_birch/plugins/superfish/”]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.
Here’s the layout without the table and still using your menu (but I haven’t touched most of the css).
<!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.
thanks alot paul for ur support
Still problem…
is there any other program or software to make the semi transparent drop down menu?
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
Thanks alot Paul’O’B
Now, submenus are working fine, but in menu blue border is coming, how can i remove this?
Could you provide an up-to-date link so we can see what you are talking about?
Try adding this to your style sheet:
#menu38 img {
border: none;
}
thanks alot ralph.m & paul everything is working fine now
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
If you just mean the top position of the menu then its because of a collsping margin here:
#container {
margin: 0 auto 20px;
Change the 20px to zero and the menu should sit on the image better.
#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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Remove the BOM and then use a full doctype.
<!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.
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.
HI, I don’t have much experience with rtl but you could try setting the menu back to ltr.
e.g.
#html1{direction:ltr}
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
It looks as though the text is aligned left but you have some padding on it.
#subwrap38 #TransMenu0-0 {
font-family: Arial,Helvetica,sans-serif !important;
font-size: 12px !important;
[B] padding: 5px !important;[/B]
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;
[B] padding: 5px !important;[/B]
text-align: left !important;
}
Try changing that padding to have no left or right padding e.g padding:5px 0!important
There also seems to be a square table cell to the left.
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