title: How can I embed an existing multi-level drop down menu without inserting the whole code?
body: <p>I have a multi-level drop down menu (done using HTML + CSS) that I want to put on a number of different pages. In the future I will need to update this menu and change its contents, so I have saved the HTML in its own file so that I can roll out the changes to all the pages at once (instead of having to go through each page and repeatedly paste in the changed list items).</p>
  
  <p>I have tried using iframe, but this cuts off the menu items with its limited height (setting a manual height that's big enough would leave tons of blank space, of course):</p>
  
  <pre><code>&lt;iframe height="100%" src="menu.html" frameborder="no" width="100%" scrolling="no"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>I also tried using embed (this looks fine until you mouse over the menu items -- it just scrolls within the frame):</p>
  
  <pre><code>&lt;embed type="text/html" src="menu.html" width="100%" height="100%"&gt;&lt;/embed&gt;
  </code></pre>
  
  <p>The menu functions fine when the code is simply dumped into the individual pages I need it on, so I know that's not the issue. It's the embedding and calling it from its own HTML file that is the problem. Is there a simple way to do this that will allow the drop-down menu to appear as it should?</p>
  
  <p>I should mention that while I have my IT department's blessing to do this, this is a project that they aren't supporting. I can only edit the HTML of my webpages in the body, and not the head. The exception being HTML pages I upload as files (like the menu code). So there are some constraints.</p>