CSS 드롭다운 메뉴

결과:

• • item1
  • item2
  • item3
  Item1
• • item1
  • item2
  • item3
  Item2
• Item3
• Item4

CSS

<style type="text/css">
#my-menu {list-style:none;padding:0px;margin:0px;height:30px;border:1px solid black;}
li.my-menu-item {float:left;line-height:30px;padding:0px;}
li.my-menu-item a.menu-item {padding:0px 10px;border-right:1px solid silver;}
li.my-menu-item:hover a.menu-item {}
li.my-menu-item .my-drop-menu {display:none;position:absolute;border:2px solid black;background-color:white;z-index:100;margin-top:30px;}
li.my-menu-item:hover .my-drop-menu {display:block;}
</style>

HTML

<ul id="my-menu">
    <li class="my-menu-item">
        <div class="my-drop-menu">
            <ul>
                <li><a href="javascript:void(0);">item1</a></li>
                <li><a href="javascript:void(0);">item2</a></li>
                <li><a href="javascript:void(0);">item3</a></li>
            </ul>
        </div>
        <a class="menu-item" href="javascript:void(0);">Item1</a>
    </li>
    <li class="my-menu-item">
        <div class="my-drop-menu">
            <ul>
                <li><a href="javascript:void(0);">item1</a></li>
                <li><a href="javascript:void(0);">item2</a></li>
                <li><a href="javascript:void(0);">item3</a></li>
            </ul>
        </div>
    <a class="menu-item" href="javascript:void(0);">Item2</a>
    </li>
    <li class="my-menu-item">
        <a class="menu-item" href="javascript:void(0);">Item3</a>
    </li>
    <li class="my-menu-item">
        <a class="menu-item" href="javascript:void(0);">Item4</a>
    </li>
</ul>