css

<style>
        body{
            margin: 0;
            padding: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            height: 35px;
            width: 100%;
            background: #999;
        }
        ul{
            width: 600px;
            list-style
 
: none;
            margin: auto;
        }
        .menu{
            position: relative;
            float: left;
            width: 100px; 
            line-height: 35px;
            height: 35px;
            text-align: center;
        }
        .subMenu{
            display: none;
            border
 
: 1px solid #ccc;
        }
        .last{
            border-bottom: 0;
        }
        a{
            color: #000;
            text-decoration: none;
        }
    </style>

js

<script>
        window.onload = function(){
            var menu = document.getElementById("nav").getElementsByClassName("menu")
            
 
for(i=0;i<menu.length;i++){//遍歷導航欄的列表項
                menu[i].onmouseover = function(){
                    this.style.background = "#fff"//滑鼠懸停後，選單背景顏色變為白色
                    var list = document.getElementsByTagName("ul")[0].getElementsByTagName("li")
                    this.getElementsByTagName("ul")[0].style.display = "block"//懸停後滑出二級選單
                    this.getElementsByTagName("ul")[0].style.width = "98px"//設定子選單的寬度
                    this.getElementsByTagName("ul")[0].style.position = "absolute"//對子選單進行定位
                    for(var i = 0;i<list.length;i++){
                        list[0].onmouseover = function(){
                            this.style.background="#fff"
                        }
                    }
                }
                menu[i].onmouseout = function(){
                    this.style.background="#999"//滑鼠移除後，背景還原成灰色
                    this.getElementsByTagName("ul")[0].style.display="none"//滑鼠離開以後，二級選單再次隱藏
                }
            }
        }
    </script>

HTML

<div id="nav">
            <ul>
                <li class="menu">選單選項1
                <ul class="subMenu">
                    <li><a href="">選單選項11</a></li>
                    <li class="last"><a href="">選單選項12</a></li>
                </ul>
            </li>
            <li class="menu">選單選項2
                <ul class="subMenu">
                    <li><a href="">選單選項21</a></li>
                    <li class="last"><a href="">選單選項22</a></li>
                </ul
            </li>
            <li class="menu">選單選項3
                <ul class="subMenu">
                    <li><a href="">選單選項31</a></li>
                    <li class="last"><a href="">選單選項32</a></li>
                </ul
            </li>
            <li class="menu">選單選項4</li>
            <li class="menu">選單選項5</li>
            <li class="menu">選單選項6</li>
            </ul>
        </div>