Hello I have the below HTML with my CSS above it and within my navigation div have a spry menu, but want to add a second spry menu within my navigation div yet above the other spry. I have a div added within my navigation div called "forspry" which I want to add this second spry menu. Could I get some guidance as to what I need to change in the below to accomplish this? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<style type="text/css"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">
<!--
body {
background-color: #999966;
background-image: url(images/test%20background.png);
}
#banner {
background-image: url(images/gettycropped2.jpg);
width: 900px;
margin: auto;
height: 400px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow:hidden;
}
#content #contentcompany {
height: 485px;
width: 488px;
background-image: url(images/leftcolumn_background2_new.png);
position: relative;
z-index: 2;
top: -50px;
text-align: left;
text-indent: 2em;
color: #FFF;
}
#content #contentcompany #missionstatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
width: 300px;
left: -20px;
position: relative;
z-index: 2;
overflow: hidden;
}
#banner #bannertext3 {
text-align: right;
padding-right: 50px;
color: #FFF;
vertical-align: top;
padding-left: 425px;
}
#banner #bannertext {
text-align: right;
padding-left: 300px;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-right: 10px;
font-size: 24px;
}
#banner #bannertext2 {
text-align: right;
color: #FFF;
padding-right: 200px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
padding-top: 0px;
}
#navigation {
margin: auto;
width: 900px;
background-image: url(images/testbanner2.png);
background-repeat: no-repeat;
height: 100px;
vertical-align: bottom;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#navigation #forspry {
height: 50px;
}
#navigation #homebutton {
height: 31px;
width: 91px;
margin-top: 60px;
margin-left: 190px;
}
#content {
margin: auto;
width: 900px;
height: 435px;
}
#footer {
margin: auto;
width: 900px;
}
.bold {
font-weight: bold;
}
#content #contentcompany{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
}
#navigation #apDiv2 {
right: 50px;
}
#navigation #apDiv2 #topmenu {
margin: auto;
padding-left: 50px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
width:666px;
height:30px;
z-index:3;
left: 452px;
top: 16px;
}
-->
</style>
</head>
<body bgcolor="#999966" background="images/test background.png">
<div id="navigation">
<div id="forspry">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a class="MenuBarItemHover" href="#">Flatbed</a></li>
<li><a class="MenuBarItemHover" href="#">Van</a></li>
<li><a class="MenuBarItemHover" href="#">Heavy Haul</a></li>
<li><a class="MenuBarItemHover" href="#">Global</a></li>
<li><a class="MenuBarItemHover" href="#">LTL</a></li>
<li><a class="MenuBarItemHover" href="#">Cross Border</a></li>
</ul>
<li><a href="#">Customers</a>
</li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li></ul>
</div spry>
</div navigation>
<div id="banner">
<div id="bannertext">
<p> </p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> "No Bad Deals"</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p> </p>
</div bannertext3>
</div banner>
<div id="content">
<div id="contentcompany">About Our Company
<h5>Mission Statement</h5>
<div id="missionstatement">
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare ourselves to any other business, only to how WE were yesterday.</li>
<li>Our Word is our bond.</li>
</ul>
</div mission>
</div contentcompany>
</div content>
<div id="footer">Content for id "footer" Goes Here</div footer>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<style type="text/css"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">
<!--
body {
background-color: #999966;
background-image: url(images/test%20background.png);
}
#banner {
background-image: url(images/gettycropped2.jpg);
width: 900px;
margin: auto;
height: 400px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow:hidden;
}
#content #contentcompany {
height: 485px;
width: 488px;
background-image: url(images/leftcolumn_background2_new.png);
position: relative;
z-index: 2;
top: -50px;
text-align: left;
text-indent: 2em;
color: #FFF;
}
#content #contentcompany #missionstatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
width: 300px;
left: -20px;
position: relative;
z-index: 2;
overflow: hidden;
}
#banner #bannertext3 {
text-align: right;
padding-right: 50px;
color: #FFF;
vertical-align: top;
padding-left: 425px;
}
#banner #bannertext {
text-align: right;
padding-left: 300px;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-right: 10px;
font-size: 24px;
}
#banner #bannertext2 {
text-align: right;
color: #FFF;
padding-right: 200px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
padding-top: 0px;
}
#navigation {
margin: auto;
width: 900px;
background-image: url(images/testbanner2.png);
background-repeat: no-repeat;
height: 100px;
vertical-align: bottom;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#navigation #forspry {
height: 50px;
}
#navigation #homebutton {
height: 31px;
width: 91px;
margin-top: 60px;
margin-left: 190px;
}
#content {
margin: auto;
width: 900px;
height: 435px;
}
#footer {
margin: auto;
width: 900px;
}
.bold {
font-weight: bold;
}
#content #contentcompany{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
}
#navigation #apDiv2 {
right: 50px;
}
#navigation #apDiv2 #topmenu {
margin: auto;
padding-left: 50px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
width:666px;
height:30px;
z-index:3;
left: 452px;
top: 16px;
}
-->
</style>
</head>
<body bgcolor="#999966" background="images/test background.png">
<div id="navigation">
<div id="forspry">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a class="MenuBarItemHover" href="#">Flatbed</a></li>
<li><a class="MenuBarItemHover" href="#">Van</a></li>
<li><a class="MenuBarItemHover" href="#">Heavy Haul</a></li>
<li><a class="MenuBarItemHover" href="#">Global</a></li>
<li><a class="MenuBarItemHover" href="#">LTL</a></li>
<li><a class="MenuBarItemHover" href="#">Cross Border</a></li>
</ul>
<li><a href="#">Customers</a>
</li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li></ul>
</div spry>
</div navigation>
<div id="banner">
<div id="bannertext">
<p> </p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> "No Bad Deals"</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p> </p>
</div bannertext3>
</div banner>
<div id="content">
<div id="contentcompany">About Our Company
<h5>Mission Statement</h5>
<div id="missionstatement">
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare ourselves to any other business, only to how WE were yesterday.</li>
<li>Our Word is our bond.</li>
</ul>
</div mission>
</div contentcompany>
</div content>
<div id="footer">Content for id "footer" Goes Here</div footer>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
