JSFiddle

  • drop down menu

    No-Library (pure JS), HTML, CSS, JavaScript

    http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu
    <ul id="menu">
          <li><a href="">Home</a></li>
          <li><a href="">About Us</a>
            <ul>
            <li><a href="">The Team</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Vision</a></li>
            </ul>
          </li>
          <li><a href="">Products</a>
            <ul>
            <li><a href="">Cozy Couch</a></li>
            <li><a href="">Great Table</a></li>
            <li><a href="">Small Chair ...</a></li></ul></li></ul>
  • drop down menu #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul id="menu">
          <li><a href="">Home</a></li>
          <li><a href="">About Us</a>
            <ul>
            <li><a href="">The Team</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Vision</a></li>
            </ul>
          </li>
          <li><a href="">Products</a>
            <ul>
            <li><a href="">Cozy Couch</a></li>
            <li><a href="">Great Table</a></li>
            <li><a href="">Small Chair</a></li>
            <li><a href="">Shiny Shelf</a></li>
            <li><a href="">Invisible Nothing</a></li>
            </ul>
          </li>
          <li><a href="">Contact</a>
            <ul>
            <li><a href="">Online ...</a></li></ul></li></ul>
  • selectors - facit #8 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    No code. How about adding some?
  • menu-vertical-variable-width-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal-- vertical-- horizontal-variable-width">
        <a>1 text</a>
        <a>2 m</a>
        <a>3 krt</a>
        <a>4 lång</a>
      </nav>
      <p>Detta ...</p></div>
  • menu-vertical-variable-width-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal--"><a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
      </nav>
      <p>Detta är en p-tagg. a ...</p></div>
  • menu-vertical-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal--"><a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
      </nav>
      <p>Detta är en p-tagg. a ...</p></div>
  • menu-vertical-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal--"><a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
      </nav>
      <p>Detta är en p-tagg. a ...</p></div>
  • menu-vertical-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal"><a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
      </nav>
      <p>Detta är en p-tagg. a ...</p></div>
  • menu-vertical-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
      <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
      <nav class="clearfix horizontal"><a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
    
      </nav>
      <p>Detta är en p-tagg. a ...</p></div>
  • menu-vertical-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
        <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
        <nav class="clearfix"><a>1</a>
         <a>2</a>
         <a>3</a>
         <a>4</a>
    
        </nav>
        <p>Detta är en p-tagg. a ...</p></div>