ulタグを使った通常タイプのメニュー（枠ありと枠なし）

メニュー

CSS

html

<DIV id="left">
                            <h2>メニュー</h2>
                            <div class="left_bg">
                                <div class="left_grad">
                                    <div class="categories">
                                        <ul>
  <li><A href="http://www.hpcreating.com//index.html">トップページ</a></li>
                        <li><A href="http://www.hpcreating.com/homepageA/a.html">ＨＰ制作　Ａコース</a></li>
                        <li><A href="http://www.hpcreating.com/homepageB/b.html">ＨＰ制作　Ｂコース</a></li>
                        <li><A href="http://www.hpcreating.com/homepageC/c.html">ＨＰ制作　Ｃコース</a></li>
                        <li><A href="http://www.hpcreating.com/homepageS/s.html">ＨＰ制作　Ｓコース</a></li>
                                         <li><A href="http://www.hpcreating.com/apply/apply.html">ホームページ制作申込</a></li>
    		<li><A href="http://www.hpcreating.com/company/company.html">会社概要</a></li>
    		<li><A href="http://www.hpcreating.com/follow/follow.html">申込～納品までの流れ</a></li>
    		<li><A href="http://www.hpcreating.com/inquire/inquire.html">お問い合わせ</a></li>
    		<li><A href="http://www.hpcreating.com/plan/plan.html">料金プラン</a></li>
    		<li><A href="http://www.hpcreating.com/effect/effect.html">画像効果</a></li>
    		<li><A href="http://www.hpcreating.com/text/text.html">テキスト・文字効果</a></li>
    		<li><A href="http://www.hpcreating.com/linkmenu/linkmenu.html">リンクメニュー一覧</a></li>
  <li><A href="http://www.hpcreating.com/mobile/mobiletop.html">モバイル対応</a></li>
<li><A href="http://www.hpcreating.com/cart/top.html">無料カートシステム</A></li>
		<li><A href="http://www.hpcreating.com/tool/tool.html">ＨＰ作成用ツール集</A></li>
		<li><A href="http://www.hpcreating.com/puzzle/puzzletop.html">無料パズル集</A></li>
		<li><A href="http://www.hpcreating.com/templates/templates.html">無料テンプレート</A></li>
                                         <li><A href="http://www.hpcreating.com/game/gameindex.html">無料ゲーム</A></li>
                                          <li><A href="http://www.hpcreating.com/links/links.html">外部リンク</A></li>
	                      <li><A href="http://www.hpcreating.com/SEO/SEO1.html">ＳＥＯとは</a></li>
                                         <li><A href="http://www.hpcreating.com/SEO/metatagu.html">メタタグとは</a></li>
  <li><a href="http://www.hpcreating.com/browser/browser.html">ブラウザの相違を実感ください</a></li>
                             <li><A href="http://www.hpcreating.com/javascript/javascript1.html">javascriptの長い配列作成方法</a></li>
<li><A href="http://www.hpcreating.com/javascript/javascript2.html">javascriptの便利なfor文</a></li>
<li><A href="http://www.hpcreating.com/javascript/javascript3.html">javascriptのソースの隠し方</a></li>
                                       </ul>
                                    </div>
                                </div>
                            </div>

ulタグで枠あり、list-styleにイメージ使用しない場合

メニュー