How to include button text and links as part of css

Question

I'm redesigning my company's website and am trying to create a horizontal navigation bar with button links (which I've managed somewhat). The problem is that the exact same menu is supposed to appear on every page (of which there are 100+) and the button options may increase of decrease in the future.

My question is this: Is there a way to place the button text and associated links in the external css to make re-coding and future edits to all those pages simpler? I've searched and tried everything I could think of. The below code is still very much a work in progress, so any advice would be appreciated.

Relevant css:

/* BEGIN Menu Buttons*/

#menu {text-align:center;}

#menu ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;}

#menu ul li {
    float: left;
    width: 140px;
    height:50px;
    list-style-type:none;}

#menu li a {
    width: 130px;
    height:40px;
    padding:5px;
    display:block;
    color: #fff ;
    background-color: #000 ;
    font: Times New Roman;
    font-size:14pt;
    line-height:40px;
    text-align:center;
    text-decoration: none ;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff;;}

#menu li a:hover {
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    outline: 1px solid #fff;
    font-size:16pt;}

/* END Menu Buttons*/

Relevant HTML:

<header>
<div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="buy.html">Buy</a></li>
        <li><a href="sell.html">Sell</a></li>
        <li><a href="maintenance.html">Maintenance</a></li>
        <li><a href="parts.html">Parts</a></li>
        <li><a href="information.html">Information</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
  </div>
</header>

Answer 1

If I understand your question correctly, the solution I would use is PHP

First of all you would need to save your page to .php for this to work (instead of .html)

Secondly, create a new file (menu.php) and paste in the MENU code above.

In every page that you have, you replace the menu HTML code with this:

<?php

include 'menu.php';

?>

(assuming you put the menu.php in the same folder as the rest of your pages)

Now, if the content of your menu expands, just edit menu.php and your menu is updated on all pages that have your menu.php file included.

Answer 2

Another solution for you, If you aren't using php and you need an html solution, you can always lean on the iframe.

<iframe id="iframe" src="xxx.html" width="500" height="180"></iframe>

but the problem with this is you woudl need to update the width on every page, should your menu become larger (wider) than this iframe accounts for.