网页导航栏鼠标移上去自动弹出下拉菜单

<meta charset="UTF-8" /> <div class="menubar"> <div class="menuitem"> <div>菜单1</div> <div class="submenu"> <div>子菜单1</div> <div>子菜单2</div> </div> </div> <div class="menuitem"> <div>菜单2</div> <div class="submenu"> <div>子菜单1</div> <div>子菜单2</div> <div>子菜单3</div> </div> </div> <div class="menuend"></div> </div> <p> lsjflsjlajlsa;djflqjwwlejrflsjdlfjwqoo;lnsdl;fgnsl;rjwjeflsdjfljl;jfowei </p> <style type="text/css"> .menubar {line-height: 24px;} .menubar .menuend {clear: both;} .menuitem {background: #fff; border: 1px solid #c00; position: relative; float: left; margin-right: 1em;} .menuitem .submenu {background: #ccc; border: 1px solid #00c; position: absolute; top: 25px; left: -1px; width: 5em;} /** 下面的控制显示和隐藏 **/ .menuitem .submenu {display: none;} .menuitem:hover .submenu {display: block;} </style>