View Single Post
Old 07-17-2006   #5 (permalink)
sancho
"Enter Random Text Here"
 
sancho's Avatar
 
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37

Send a message via MSN to sancho Send a message via Skype™ to sancho
I had a look at your site and have adapted the code to give you a better idea of the menu You can see it here http://iamsancho.co.uk/test/navigationmenu.html

It will work in IE (including IE7) and firefox

The code is below, but you will have to change image paths

Code:
<html>
<head>
<title>PACIFIC EXPOS - HAWAII'S LEADING CONSUMER TRADE SHOW COMPANY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*** Nav bar style<strong></strong>s ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
        margin: 0;
        padding: 0;
        cursor: default;
        list-style-type: none;
}

ul.nav{
        width: 25ex;
/*Optional, to make the navigation bar positions on the left of the content*/
        float: left;
        margin-right: 0em;
}

ul.nav>li{
        margin: 0;
        padding: 3px 7px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
        display: none;
        position: absolute;
        width: 20ex;
        left: 35ex;
        margin-top: -8em;
        margin-left: 15px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
        display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
        display: block;
		border-color:#000000;
		border-left: thin;
		border-right: thin;
		border-bottom: thin;
		border-top: thin;
		padding: 2px 10px;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
        background-color: #fff;
        color: #000;
		font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
}


.nav ul a:hover{
font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
border: solid 1px #FFCC00;
        background-color: #000000;
        color:#FFCC00;
}
		

ul.nav li:active,
.nav li a:active{
        background-color: #;
        color: #000;
	
}

ul{
        border: 0px solid #000;
}

.nav a{
        text-decoration: none;
}
#menu {
width: 12em;
background: #eee;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
/*font: bold 11px/16px arial, helvetica, sans-serif;*/
display: block;
/*border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;*/
margin: 0;
padding: 0/*2px 3px*/;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #fff;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 101%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#menu img
{
	border: none;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
} 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
} 

</style>
<![endif]-->
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table align="center" border="2" bordercolor="#000000" cellpadding="2" width="200">
  <tbody>
    <tr>
      <td><!-- ImageReady Slices (index.psd) -->
        <table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="716" width="876">
          <tbody>
            <tr>
              <td rowspan="3"><img src="navigationmenu_files/index_01.jpg" alt="" height="186" width="195"></td>
              <td><img src="navigationmenu_files/index_02.jpg" alt="" height="93" width="680"></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="93" width="1"></td>
            </tr>
            <tr>
              <td><img src="navigationmenu_files/index_03.jpg" alt="" height="79" width="680"></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="79" width="1"></td>
            </tr>
            <tr>
              <td rowspan="2"><img src="navigationmenu_files/index_04.jpg" alt="" height="22" width="680"></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="14" width="1"></td>
            </tr>
            <tr>
              <td rowspan="2"><img src="navigationmenu_files/index_05.jpg" alt="" height="21" width="195"></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="8" width="1"></td>
            </tr>
            <tr>
              <td rowspan="11">&nbsp;
                <iframe src="navigationmenu_files/MainFrame.htm" name="Main" frameborder="0" height="526" scrolling="auto" width="680"></iframe></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="13" width="1"></td>
            </tr>
            <tr>
              <td><img src="navigationmenu_files/index_07.jpg" alt="" height="40" width="195"></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="40" width="1"></td>
            </tr>
            <tr>
              <td><div id="menu">
              <ul>
                <li>
                  <ul>
                    <li><a href="#"><strong><img src="navigationmenu_files/index_08.jpg"/></strong></a>
                      <ul style="border: 2px solid rgb(0, 0, 0);">
                        <li><a href="http://www.pacificexpos.com/BoothInfoSNPS.htm">Booth Information</a></li>
                        <li><a href="http://www.pacificexpos.com/SpringShowAPP.pdf" target="_new">Show Contract (*download)</a></li>
                        <li><a href="http://www.pacificexpos.com/SpecialEventsSNPS.htm">Special Events</a></li>
                        <li><a href="http://www.pacificexpos.com/PressReleaseSNPS.htm">Strong Man</a></li>
                        <li><a href="http://www.pacificexpos.com/PicturesSNPS.htm">Pictures</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
              <ul>
                <li>
                  <ul>
                    <li><a href="#"><strong><img src="navigationmenu_files/index_09.jpg"/></strong></a>
                      <ul style="border: 2px solid rgb(0, 0, 0);">
                        <li><a href="http://www.pacificexpos.com/BoothInfoBHGS.htm">Booth Information</a></li>
                        <li><a href="http://www.pacificexpos.com/HomeShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
                        <li><a href="http://www.pacificexpos.com/SpecialEventsBHGS.htm">Special Events</a></li>
                        <li><a href="http://www.pacificexpos.com/PressReleaseBHGS.htm">Press Release</a></li>
                        <li><a href="http://www.pacificexpos.com/DiscountCoupon.htm">Discount Coupon</a></li>
                        <li><a href="http://www.pacificexpos.com/PicturesBHGS">Pictures</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
              <ul>
                <li>
                  <ul>
                    <li><a href="#"><strong><img src="navigationmenu_files/index_10.jpg"/></strong></a>
                      <ul style="border: 2px solid rgb(0, 0, 0);">
                        <li><a href="http://www.pacificexpos.com/BoothInfoWS.htm">Booth Information</a></li>
                        <li><a href="http://www.pacificexpos.com/WeddingShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
                        <li><a href="http://www.pacificexpos.com/PicturesWS.htm">Pictures</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
              <ul>
                <li>
                  <ul>
                    <li><a href="#"><strong><img src="navigationmenu_files/index_11.jpg"/></strong></a>
                    <ul style="border: 2px solid rgb(0, 0, 0);">
                      <li><a href="http://www.pacificexpos.com/BoothInfoFNPS.htm">Booth Information</a></li>
                      <li><a href="http://www.pacificexpos.com/FoodShowShowAPP.pdf">Show Contract (*Download)</a></li>
                      <li><a href="http://www.pacificexpos.com/SpecialEventsFNPS.htm">Special Events</a></li>
                      <li><a href="http://www.pacificexpos.com/PicturesFNPS.htm">Pictures</a></li>
                    </ul>
                    </li>
                    <li><strong><a href="http://www.philtradeexpo.com/"><img src="navigationmenu_files/index_12.jpg" border="0"></img></a></strong></li>
                  </ul>
                </li>
              </ul>
            </div></td>
            </tr>
            <tr>
              <td><a href="http://www.tarachanel.com/" target="_blank"><img src="navigationmenu_files/index_13.jpg" alt="" border="0" height="41" width="195"></a></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="41" width="1"></td>
            </tr>
            <tr>
              <td><a href="http://www.pacificexpos.com/OOTExhibitors.htm" target="Main"><img src="navigationmenu_files/index_14.jpg" alt="" border="0" height="33" width="195"></a></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="33" width="1"></td>
            </tr>
            <tr>
              <td><a href="http://www.pacificexpos.com/Questionnaire.htm" target="Main"><img src="navigationmenu_files/index_15.jpg" alt="" border="0" height="28" width="195"></a></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="28" width="1"></td>
            </tr>
            <tr>
              <td><a href="http://www.pacificexpos.com/ContactUs.htm" target="Main"><img src="navigationmenu_files/index_16.jpg" alt="" border="0" height="40" width="195"></a></td>
              <td><img src="navigationmenu_files/spacer.gif" alt="" height="40" width="1"></td>
            </tr>
          </tbody>
        </table>
        <!-- End ImageReady Slices --></td>
    </tr>
  </tbody>
</table>
</body>
</html>
__________________

Portfolio: www.simonmclaughlin.co.uk
Cheap UK hosting: www.qubithosting.com

Last edited by sancho; 07-17-2006 at 09:05 PM..
sancho is offline