title: HTML list selection <li> calling php applications
body: <p>facing a bit of a difficult area in my first page itself (index.php), these are the things that I hope to have.  I assume these can be solved with HTML.</p>
  
  <ol>
  <li>I hope to have the menu listing on the left, and when selected, should be able to call other  php programs, which will be displayed on the right.</li>
  <li>The selected item from the list on the left should be made bold.  </li>
  <li>The default page should be “home”  (the first on selection list).</li>
  </ol>
  
  <p>I have given below the code that I came up with but it doesnt work the way I like it to work.</p>
  
  <p>Part of index.php</p>
  
  <pre><code>&lt;table id="structure"&gt;
  &lt;tr&gt;
      &lt;td id="navigation"&gt;
         &lt;ul class = subjects&gt;
            &lt;li&gt;&lt;a href="manage.php?page=1"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href= "#B"&gt;Pet Listing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href= "#B"&gt;Galary&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href= "#B"&gt;Clubs&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href= "#B"&gt;Member area&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href= "#B"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/td&gt;
        &lt;td id="page"&gt;
          &lt;h2&gt; Home &lt;/h2&gt;
          &lt;div class = "page-content" &gt;
              &lt;p&gt; We noticed that many pet owners are isolated with little knowledge to bring up their pets....... &lt;/p&gt; 
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Part of the CSS is as below</p>
  
  <pre><code>#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
  #navigation a { color: #D4E6F4; text-decoration: none; }
  ul.subjects { padding-left: 0; list-style: none; }
  ul.pages { padding-left: 2em; list-style: square; }
  .selected { font-weight: bold; }
  </code></pre>