spry menu bar

[Twista500]

Hello I ran into a problem, So I have my layout When i try adding a spry menu bar It wont go into my Navgiation Bar but will go to other places heres My CSS and my layout HTML

Show Hide

[@]@charset "UTF-8"[/@];

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */


/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/************************************************** *****************************


LAYOUT INFORMATION: describes box model, positioning, z-order


************************************************** *****************************/


/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: +2% 0 0 2%;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 30em; /* Change to the width of your own menu bar */
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}


/************************************************** *****************************


DESIGN INFORMATION: describes color scheme, borders, fonts


************************************************** *****************************/


/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}


/************************************************** *****************************


SUBMENU INDICATION: styles if there is a submenu under a given menu item


************************************************** *****************************/


/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}


/************************************************** *****************************


BROWSER HACKS: the hacks below should not be changed unless you are an expert


************************************************** *****************************/


/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
[@]@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline[/@];
f\loat: left;
background: #FFF;
}
}

/**MENU BAR**/
#MenuBar {
background-color:#006600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
font-style: normal;
padding:0;
margin-top:40px; /**adjust margin as needed**/
}

Show Hide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlang="en" lang="en">
<head>


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="itsJason . http://itsjasonj.deviantart.com/" />
<meta name="description" content="Habbo Hotel fan site." />
<meta name="keywords" content="haribo, habbo, lol, sexy, great, fansitedev, devfansite, games, radio, fun, fm, licence, habbos, fansite, popular" />
<meta name="language" content="en-gb" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content="2010 FansiteDev" />
<meta name="rating" content="Safe For Kids" />

<title>FansiteDEV &raquo; Helping you develop your fansite </title>
<link rel="shortcut icon" href="_img/my_5.gif" type="image/x-icon" />

<link href="_css/reset.css" type="text/css" rel="stylesheet" />
<link href="_css/global.css" type="text/css" rel="stylesheet" />
<link href="_css/buttons.css" type="text/css" rel="stylesheet" />
<link href="_css/darktheme.css" type="text/css" rel="alternate stylesheet" media="screen" title="dark-theme" />
<link href="_css/dltheme.css" type="text/css" rel="alternate stylesheet" media="screen" title="dark-light theme" />
<link href="_css/lightbox.css" type="text/css" rel="stylesheet" media="screen" />


<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/core.js"></script>
<script type="text/javascript" src="_js/ajax.js"></script>
<script type="text/javascript" src="_js/styleswitch.js">
/***********************************************
* Style Sheet Switcher v1.1- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script src="file:///C|/Users/Johnathan/AppData/Roaming/Adobe/Dreamweaver CS4/en_US/Configuration/Temp/Assets/eam1121.tmp/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/Johnathan/AppData/Roaming/Adobe/Dreamweaver CS4/en_US/Configuration/Temp/Assets/eam1121.tmp/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>


<script type="text/javascript" src="_js/wz_tooltip.js"></script>


<!-- CODED BY ITSJASON OF CLUBHABBOFORUM -->

<div id="wrapper">


<div id="banner">
<div id="message-of-the-day"></div>
<div id="message">
Hello and welcome to FansiteDev, this is a habbo resource fansite.
</div>
</div>


<div id="sides">
<div id="sub-navigation"></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>


<div id="left">


<div id="quick-links"></div>
<div id="box-middle-1">
<div class="box-header">
<blockquote>
<p href="_subnav/layouts.html" name="sub-navigation"><a href="_subnav/layouts.html" name="sub-navigation">
&raquo; Habbo Layouts</a><br />
Find your habbo layouts here!
</p>
</blockquote>
</div>
<div class="box-header-2">
<blockquote>
<p href="_subnav/exclusiveresources.html" name="sub-navigation" ><a href="_subnav/exclusiveresources.html" name="sub-navigation" >
&raquo; Exclusive Resources</a><br />
Find excl. resources here that can't be seen anywhere else!
</p>
</blockquote>
</div>
</div>
<div class="box-bottom"></div>


<div id="latest-news"></div>
<div id="box-middle-2">
<div class="news-header">
<blockquote>
<p><a href="_subnav/news/news4.html">&raquo; What?! FansiteDev 2?!</a><br />
Posted by itsJason on August 29, 2010
</p>
</blockquote>
</div>
<div class="news-header">
<blockquote>
<p><a href="_subnav/news/news3.html">&raquo; FansiteDev links with ThisHabbo!</a><br />
Posted by itsJason on July 20, 2010
</p>
</blockquote>
</div>
</div>
<div class="box-bottom-2"></div>


<div id="weekly-poll"></div>
<div id="box-middle-3">
<blockquote>
<p>
Polls are currently unavailable, please check back later.
</p>
</blockquote>
</div>
<div class="box-bottom"></div>


</div>



<div id="right">


<div id="statistics">
<div id="fansitedev-statistics"></div>
<div id="mid-box-middle">
hahaha
</div>
<div id="mid-box-bottom"></div>
</div>


<a href="_subnav/fansitedev/faqs.html">
<div id="slideshow"></div>
</a>

<div id="welcome-to-fansitedev"></div>
<div id="content-middle">
Welcome to FansiteDev, a Habbo Hotel resource fansite which offers you <strong>exclusive</strong> and non-exclusive resources. FansiteDev is owned and managed by <strong>itsJason</strong> and is supported by a fantastic team of dedicated staff members. FansiteDev is mainly known for its exlusive content which is only available on this very fansite. Exclusive content ranging from alts to layouts. Although we are currently an unofficial fansite, we always try our best to give our supporters the best content quality that we can.
<br /><br />
FansiteDev holds a ton of resources, updated daily by our team of staff members, we update you with the latest content that is out there. Not only this, but we hold a ton of exclusive content that can only be seen in our archives!
<br /><br />
We need your help. If you have any content that you can submit to us, go right ahead! We really would appreciate it and you would be recognized on this fansite. Please keep in mind that any content located in the exclusive resources archive is for free use only and should not be sold or re-released on any other resource fansite. If you do however, then your host will be contacted and the content will be removed.
</div>
<div id="content-bottom"></div>


</div>


</div>


<div id="filler"></div>


<div id="footer">
<strong>FansiteDev</strong> � Copyrighted 2010 <br /><br />
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default Theme
<input type="radio" name="choice" value="dark-theme" onClick="chooseStyle(this.value, 60)">Dark Theme
<input type="radio" name="choice" value="dark-light theme" onClick="chooseStyle(this.value, 60)">Dark-Light Theme
</form>
<div class="floatright">
<a href="_subnav/homepage.html">Home</a> |
<a href="_subnav/fansitedev/aboutus.html">About</a> |
<a href="_subnav/submitresource/contactus.php" target="_blank" >Contact</a> |
<a href="_subnav/fansitedev/disclaimer.html;">Disclaimer</a>
<br />
Layout Designed by <strong>Jake James</strong> <br />
Layout Coded by <strong>itsJason</strong>


</div>
</div>


</div>


<a id="habboemotion" href="http://habboemotion.com" target="_blank">Can't find your ideal resources?</a>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>