导航栏在不同分辨率下显示不同

Question

我有这个navbar.css。当我在笔记本电脑上以较低的分辨率测试它时，我注意到下拉子菜单彼此重叠。例如。在1280 * 720，我们的课程正在录取。当我将鼠标悬停在我们的计划上时，入学与我们计划的下拉子菜单重叠。所以，我无法在“我们的程序”子菜单中看到所有链接。导航栏显示为1366 * 768。

如何确保所有浏览器和所有分辨率的导航栏显示相同？

为了更好地了解我的问题，请查看我的网站www.merryflowers.com。尝试在不同浏览器上以不同分辨率查看它。谢谢。

 #menu {
    border:none;
    border:0px;
    margin:0px;
    margin-bottom:5%;
    padding:0px;
    /*font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;*/
    font-size:18px;
    font-weight:bold;
}

#nav {
    height:25px;    /*35px;*/
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
    background:#ffcd05;
        }

#nav li {
    display:inline-block;
    position:relative;
    float:left;
/*    background: #006633;
*/  background:#f26739;

    }

#nav li a {
    display:inline-block;
    width:150px;
    line-height:25px;
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }

#nav li li {float:left; #006633;}

#nav li li a {display:block;font-size:14px;}

#nav li:hover {background:#000000;}

/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0px;
    left:0;
    display:none;
    }

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {display:none;}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {display:block;} 
#nav li li:hover ul {margin-left:140px; margin-top:-23px; display:block;}