<div id="portfolio">
    <ul>
        <li class="main"><a href="#nogo">menu 1<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="container1">
                <li>
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li class="main"><a href="#nogo">menu 2<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="container2">
                <li>
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li class="main"><a href="#nogo">menu 3<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="container1">
                <li>
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li class="main"><a href="#nogo">menu 4<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="container2">
                <li>
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-css2.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                <img src="../imgs/valid-xhtml10.png" width="88" height="31" alt="sample" />
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
</div>
/* >>portfolio */
#portfolio img { /* this section must adjust by the images you wants to be put in */
    float: left;
    width: 88px;
    height: 31px;
    margin: 20px;
    padding: 0;
    border: none;
}
#portfolio ul { /* menu container */
    position: relative;
    width: 400px;
    height: 25px;
    margin: 0;
    padding: 0;
}
#portfolio ul li { /* menu */
    float: left;
    display: block;
    width: 100px;
    height: 25px;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
#portfolio ul ul { /* panel container */
    visibility: hidden;
    position: absolute;
    top: 25px;
    left: 0;
    width: 400px;
    min-height: 71px;
    background: #ddd;
}
#portfolio ul ul li  { /* panel */
    float: left;
    display: block;
    width: 400px;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
}
#portfolio ul a  {
    display: block;
    width: 100px;
    height: 25px;
    background: #f0f0f0;
    margin: 0;
    padding: 0;
}
#portfolio ul a:hover {
    color: #f11;
    background: #ddd;
}
#portfolio ul :hover > a {
    color: #f51;
    background: #ddd;
}
#portfolio ul li:hover ul, #portfolio ul a:hover ul {
    visibility: visible;
}
#portfolio ul.container1 { height: 71px; }
#portfolio ul.container2 { height: 142px; }

#portfolio table {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}