Dwupoziomowe menu

HTML: strona przedstawiająca dwupoziomowe menu.
Podgląd:

Kod programu:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>szablon dwupoziomowego menu rozwijanego</title>

    <style>
      /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */
      #menu, #menu ul, #menu ol {
        list-style-type:none;
        padding:0;
        margin:0;
      }
      #menu {
        background-color:#FFF;
        font-size:18px;
        height:2em;
        line-height:2em;
        text-align:center;
      }
      #menu a {
        display:block;
        text-decoration:none;
        color:#000;
        padding:0 5px;
      }
      #menu > li {
        float:left;
        width:150px;
        margin-left:8px;
        background-color:#FDD700;
        height:2em;
      }
      #menu > li:first-child {
        margin-left:0;
      }
      #menu > li:hover {
        background-color:#EEE;
      }  
      #menu > li:hover > a {
        color:#09C;
      }
      #menu > li:hover > ul {
        display:block;
      }

      /* ------------------------CZĘŚĆ-ROZWIJANA-MENU-POZIOM-1----------------------- */

      #menu > li > ul {
        display:none;
      }
      #menu > li > ul > li {
        position:relative;
        background-color:#EEE;
      }
      #menu > li > ul > li > a {
        border-top:1px solid #FFF;
      }
      #menu > li > ul > li:hover {
        background-color:#DDD;
      }
      #menu > li > ul > li:hover > a {
        color:#09C;
      }

      /* ------------------------CZĘŚĆ-ROZWIJANA-MENU-POZIOM-2----------------------- */

      #menu > li > ul > li > ol {
        display:none;
        width:150%;
        position:absolute;
        left:100%;
        margin-top:-2em;
      }
      #menu > li > ul > li:hover > ol {
        display:block;
      }
      #menu > li > ul > li > ol > li {
        background-color:#CCC;
      }
      #menu > li > ul > li > ol > li > a {
        border-top:1px solid #FFF;
        border-left:1px solid #FFF;
      }
      #menu > li > ul > li > ol > li > a:hover {
        color:#09C;
      }

      /* ------------------------WSPÓLNE----------------------- */

      /* zaokrąglone rogi wszystkich elementów - li - oraz - a */
      #menu li, ol a {
        border-radius:6px;
      }

      /* strzałka w prawo */
      #menu .dol {
        background-image:url('http://kodcss.pl/img/down.png');
        background-repeat:no-repeat;
        background-position:98% center;
      }

      /* strzałka w dół */
      #menu .prawo {
        background-image:url('http://kodcss.pl/img/right.png');
        background-repeat:no-repeat;
        background-position:98% center;
      }
    </style>

  </head>

<body>

  <ol id="menu">
    <li class="dol"><a href="#">O mnie</a>
      <ul>
        <li><a href="#">dolny - 1</a></li>

        <li class="prawo"><a href="#">link - 2</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
            <li><a href="#">boczny - 5</a></li>
            <li><a href="#">boczny - 6</a></li>
          </ol>
        </li>

        <li class="prawo"><a href="#">link - 3</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
          </ol>
        </li>

        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li class="dol"><a href="#">Galeria</a>
      <ul>
        <li><a href="#">Biuro</a></li>

        <li class="prawo"><a href="#">Wizyty</a>
          <ol>
            <li><a href="#">Wizyta - 1</a></li>
            <li><a href="#">Wizyta - 2</a></li>
            <li><a href="#">Wizyta - 3</a></li>
            <li><a href="#">Wizyta - 4</a></li>
            <li><a href="#">Wizyta - 5</a></li>
          </ol>
        </li>

        <li><a href="#">Prywatnie</a></li>
      </ul>
    </li>

    <li><a href="#">Projekty</a></li>

    <li class="dol"><a href="#">Kontakt</a>
      <ul>
        <li><a href="#">E_mail</a></li>
        <li><a href="#">Telefon</a></li>
        <li><a href="#">Faks</a></li>
        <li><a href="#">Adres</a></li>
      </ul>
    </li>
	
	<li class="dol"><a href="#">Nowy</a>
      <ul>
        <li><a href="#">dolny - 1</a></li>

        <li class="prawo"><a href="#">link - 2</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
            <li><a href="#">boczny - 5</a></li>
            <li><a href="#">boczny - 6</a></li>
          </ol>
        </li>

        <li class="prawo"><a href="#">link - 3</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
          </ol>
        </li>

        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>
	
	<li class="dol"><a href="#">Nowy 2</a>
      <ul>
        <li><a href="#">dolny - 1</a></li>

        <li class="prawo"><a href="#">link - 2</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
            <li><a href="#">boczny - 5</a></li>
            <li><a href="#">boczny - 6</a></li>
          </ol>
        </li>

        <li class="prawo"><a href="#">link - 3</a>
          <ol>
            <li><a href="#">boczny - 1</a></li>
            <li><a href="#">boczny - 2</a></li>
            <li><a href="#">boczny - 3</a></li>
            <li><a href="#">boczny - 4</a></li>
          </ol>
        </li>

        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>
  </ol>

</body>
</html>
HTML Technologie Internetowe