jquery two menus one not working after adding second one.

I am attaching the code for this.  If I use the top menu by itself works fine.  When I add the second jquery menu which I need to have then the top one works except the drop down menus. I listed.  Here are the main page and two menu files.  I can provide other if necessary.  What happens is the side menu works fine but the two drop down menus on the top stop working when I add the second menu.
MainPage.pdf
topmenu.pdf
SideMenu.pdf
kdschoolAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ioannis ParaskevopoulosCommented:
Hi,

The way you have given the code is very hard for any of us o read. topmenu.pdf seems to be the code of the js library you are using, so really not needed. The best way for you would be to use the code button when you write your question and put all related code in there. This way you help us help you.

Now, reading your code it is not very clear which file calls which, as you have changed the names, but i would guess you are trying to load what is in SideMenu.pdf from what is in MAinPage.pdf. An issue i see there is having proper HTML headers in your SideMenu. When you include a file then what you actuually do is replacing  '<!--include.....-->' with the contents of the file indicated by the include. In your case you will end up with an HTML document containing two DOCUMENT declarations and two head elements. Moreover, the second declaration and head element will be in the body element of the main page leading to a malformed html.

I would suggest as a first step to remove rows 1-12 and 78-81 from SideMenu.pdf.

Try that and let us know how did it go.

Giannis
kdschoolAuthor Commented:
The side menu works fine.  It's the top menu.  It does not show the two submenus dropdowns on the last two items on the menu.  I named them dropdown.  I don't see the code loader.  Can you direct me where it is and I can load all the files.

The topmenu opens inside the MainPage.  That is theone not working.
Ioannis ParaskevopoulosCommented:
Hi,

Pls check the screenshot in order to find the button.
Code Button
I would also like if you can to open your page in the browser. This will have the final code after setting all the includes etc. If you could get the page source of that (usually it is ctrl + U) and paste it in a comment, it might give us an idea of what is wrong.

Disclaimer: when i refer to us, i do not mean to be a megalomaniac who tries to refer to himself in the third plural... :) . I just refer to the Experts in general, because someone else could also provide an answer.

Thanks,
Giannis
kdschoolAuthor Commented:
Here is the main page code and the jquery (menu.shtml) that are not working from the source file in browser.  let me know what other code you need. Thank you.


<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Home Page</title>
	

</head>
<body>
<div id="hronline" class="small_text">
    	<div class="container">
		<div class="grid_14">
   	<div id="nav">
		<ul class="navigation">
            <li><a href="#">HOME</a></li>
			<li><a href="#">LINK</a></li>
			<li><a href="#">LINK</a></li>
		</ul>
	</div>
</div>
            
<div class="grid_13">
       <!-- People Finder -->
       <div class="search_pad">
       <div class="search">

            <form action="#" method="post" name="PeopleDirLookupBox" target="_parent">
				<input class="gray_text textbox" type="text" name="Search" size="12" value="People Finder..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'People Finder...';}"  onfocus="if (this.value == 'People Finder...') {this.value = '';}">
                <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
    			<!-- <input class="small_text submit" type="submit" name="goButton" value="Go"> -->
    			<input type="hidden" name="Button" value="Search">
			</form>         
      </div>
      </div>
</div>
            
<div class="grid_13">
      <!-- Keyword Search -->
      <div class="search_pad">
      <div class="search">
            
<form name="kform" method="get" action="#" target="_parent">
    <input class="gray_text textbox" name="keyword" size="12" maxlength="30" value="Keyword Search..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Keyword Search...';}"  onfocus="if (this.value == 'Keyword Search...') {this.value = '';}">
     <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
    <!-- <input class="small_text submit" type="submit" value="Go" name="submit"> -->
</form>
      </div>
      </div>
</div>
            
 <div class="grid_13">
        <!-- Google Search -->
        <div class="search_pad">
        <div class="search">
   		<form name="gs" method="GET" action="#"> 
      	<input class="gray_text textbox" type="text" name="q" size="12" maxlength="256" value="Google Search..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Google Search...';}"  onfocus="if (this.value == 'Google Search...') {this.value = '';}" />
         <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
      	<!-- <input class="small_text submit" name="btnG" value="Go" type="submit" /> -->
		 <input type="hidden" name="entqr" value="3" />
		<input type="hidden" name="output" value="xml_no_dtd" />
		<input type="hidden" name="sort" value="date:D:L:d1" />
		<input type="hidden" name="ud" value="1" />
		<input type="hidden" name="lr" value="">
		<input type="hidden" name="num" value="10">
		<input type="hidden" name="client" value="fedex_search_frontend">
		<input type="hidden" name="proxystylesheet" value="fedex_search_frontend">
		</form>
       </div>
       </div>
</div>

        </div>
</div>
    
<div id="hrbanner">
    <div class="container">
        <div class="grid_15">    <br />        
        		<h4 class="grey_text timesnewroman ">WEB SITE NAME FOR PAGE</h4>                
        </div>
        <div class="grid_16 logo_space"></div>
     </div>
</div><br>
 
<!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">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Corp Safety Health &amp; Fire Prevention</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/jetmenu.css" rel="stylesheet"><br>

  	<script type="text/javascript" src="js/jetmenu.js"></script>
  	<script type="text/javascript">
			jQuery(document).ready(function(){  
				$().jetmenu();
			});
		</script>
</head>

<body>

<div id="menu_wrap">
    <div class="container">
 		<div class="content">
<ul id="jetmenu" class="jetmenu purple">
     	<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
        <li><a href="#">DROP DOWN NOT WORKING</a> 
         <ul class="dropdown"> 
		<li><a href="#" target="_blank">SUB MENU</a></li> 
		<li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        </ul></li>

		<li><a href="#">DROP DOWN NOT WORKING</a>
        <ul class="dropdown"> 
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU </a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SSUB MENU</a></li>
		</ul>
 		</div>
	</div>
</div>
</body>
</html>


<div class="container white_box">
<div class="grid_9"><br /></div>
	<div class="grid_9">
	  <div class="grid_12">

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Main Menu</span></a></li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='/adfwp/adfwpMain.shtml'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
         <li><a href='#'><span>Main Menu 
 </span></a></li>
      </ul>
   </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
    </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Mene</span></a></li>
      </ul>
   </li>
</div>

</div>
       <div class="grid_12a">
      <img src="images/LoadingAircraftC.jpg"  alt="image"></div><br />
      <div class="grid_2a ltgreen_box">
      <h3 class="oswald"><br />Reminders for the Team</h3>
 <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />
In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

</div>


</div>      <!--closes Grid 9--> 
    
<div class="grid_3 gray_box">
    	<h2 class="roboto white_text large_text underline">What's New for the Team</h2>  
		<p class="roboto white_text med_text">
<a href="#"> Item 1</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item21</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 3</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 4</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item51</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 6</a></p> 
		<p class="roboto white_text med_text">
        <a href="#"> Item 7</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 8</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 9</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 10</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 11</a></p>
</div>
    </div>
    
<div class="container">
   		<div class="grid_8a ltyellow_box">
      	<h2 class="oswald">MESSAGE FIELD ONE</h2>
      	<p class="roboto"> 
		In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque  <br />
 		</div>

		<div class="grid_8b ltyellow_box">
        <h2 class="oswald">MESSAGE FIELD TWO</h2>
        <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque <br /></p>
		</div>
</div>      
<div class="grid_9"><br /></div>

	<div id="footer">
    	<div class="container">
		<div><h2 class="oswald white_text"> QUICK RESOURCES</h2> </div>

  	<div class="grid_3">
    <div><h3 class="oswald white_text"> HOT TOPICS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div> 


    <div class="grid_3">
    <div><h3 class="oswald white_text"> COMMUNICATIONS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
    ></div>
    
    <div class="grid_3">
 <div><h3 class="oswald white_text"> CONTACTS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
 ></div>
 
	<div class="grid_3">
<div><h3 class="oswald white_text"> MANUALS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
    ></div>
       	
<div class="grid_11"><br />
	<hr style="height:.25px" color="#999999" width="1110px">
	<p class="small_text white_text">This site is for users only that are inside the firewall.</p>
</div>

        </div>
    </div>
</body>
</html>

Open in new window


 
<!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">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Corp Safety Health &amp; Fire Prevention</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/jetmenu.css" rel="stylesheet"><br>

  	<script type="text/javascript" src="js/jetmenu.js"></script>
  	<script type="text/javascript">
			jQuery(document).ready(function(){  
				$().jetmenu();
			});
		</script>
</head>

<body>

<div id="menu_wrap">
    <div class="container">
 		<div class="content">
<ul id="jetmenu" class="jetmenu purple">
     	<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
        <li><a href="#">DROP DOWN NOT WORKING</a> 
         <ul class="dropdown"> 
		<li><a href="#" target="_blank">SUB MENU</a></li> 
		<li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        </ul></li>

		<li><a href="#">DROP DOWN NOT WORKING</a>
        <ul class="dropdown"> 
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU </a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SSUB MENU</a></li>
		</ul>
 		</div>
	</div>
</div>
</body>
</html>

Open in new window

Ioannis ParaskevopoulosCommented:
As i suggested in my first post, you do end up with a malformed html, that has two DOCUMENT declarations.

Another point that is wrong is that you declare your css and js libraries in the inner file. They should be declared on the main file.

Now my code might not be the most correct one, but it could be a start for you.

Your main page file should like :

<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Home Page</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/jetmenu.css" rel="stylesheet"><br>

  	<script type="text/javascript" src="js/jetmenu.js"></script>
  	<script type="text/javascript">
			jQuery(document).ready(function(){  
				$().jetmenu();
			});
		</script>
	

</head>
<body>
<div id="hronline" class="small_text">
    	<div class="container">
		<!--#include file=header.shtml" -->
        </div>
</div>
    
<div id="hrbanner">
    <div class="container">
        <div class="grid_15">    <br />        
        		<h4 class="grey_text timesnewroman ">WEB SITE NAME FOR PAGE</h4>                
        </div>
        <div class="grid_16 logo_space"></div>
     </div>
</div><br>
 
<!--#include file=menu.shtml" -->

<div class="container white_box">
<div class="grid_9"><br /></div>
	<div class="grid_9">
	  <div class="grid_12">
	<!--#include file="cssmenu/index.html" -->
<ul>
   <li class='active'><a href='#'><span>Main Menu</span></a></li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='/adfwp/adfwpMain.shtml'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
         <li><a href='#'><span>Main Menu 
 </span></a></li>
      </ul>
   </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
    </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Mene</span></a></li>
      </ul>
   </li>
</div>

</div>
       <div class="grid_12a">
      <img src="images/LoadingAircraftC.jpg"  alt="image"></div><br />
      <div class="grid_2a ltgreen_box">
      <h3 class="oswald"><br />Reminders for the Team</h3>
 <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />
In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

</div>


</div>      <!--closes Grid 9--> 
    
<div class="grid_3 gray_box">
    	<h2 class="roboto white_text large_text underline">What's New for the Team</h2>  
		<p class="roboto white_text med_text">
<a href="#"> Item 1</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item21</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 3</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 4</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item51</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 6</a></p> 
		<p class="roboto white_text med_text">
        <a href="#"> Item 7</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 8</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 9</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 10</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 11</a></p>
</div>
    </div>
    
<div class="container">
   		<div class="grid_8a ltyellow_box">
      	<h2 class="oswald">MESSAGE FIELD ONE</h2>
      	<p class="roboto"> 
		In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque  <br />
 		</div>

		<div class="grid_8b ltyellow_box">
        <h2 class="oswald">MESSAGE FIELD TWO</h2>
        <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque <br /></p>
		</div>
</div>      
<div class="grid_9"><br /></div>

	<div id="footer">
    	<div class="container">

		<!--#include file=footer.shtml" -->

        </div>
    </div>
</body>
</html>     

Open in new window


Then your "menu.shtml" should look like:

<div id="menu_wrap">
    <div class="container">
 		<div class="content">
<ul id="jetmenu" class="jetmenu purple">
     	<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
        <li><a href="#">DROP DOWN NOT WORKING</a> 
         <ul class="dropdown"> 
		<li><a href="#" target="_blank">SUB MENU</a></li> 
		<li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        </ul></li>

		<li><a href="#">DROP DOWN NOT WORKING</a>
        <ul class="dropdown"> 
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU </a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SSUB MENU</a></li>
		</ul>
 		</div>
	</div>
</div>

Open in new window


This means you should remove the document declaration, the head and not add the body element. Only what is in the body should appear in that file.

Another change i did on your main page file is that i got the links and javascript from your menu file header declaration and put it on the main page.

I hope this gets you a step forward.

Giannis

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.