这个下拉菜单在HTML中工作得很好，但当我将其移动到wordpress模板时，它和它的容器（菜单顶部容器）之间有一个间隙。当鼠标放在菜单上时，你会找到间隙。http://www.jamesxu.com.au/temp/

有趣的是，我将wordpress中的所有css复制到HTML中，间隙消失了。为什么？

.menu-top-container {margin: 0 auto 20px auto; text-align: center; font-family: \'Libre Baskerville\', serif; font-size:1.1em !important; line-height:normal !important;background:#e41f3a;}
.menu-top-container ul ul {display: none;}  
.menu-top-container ul li:hover > ul {display: block;}  
.menu-top-container ul {
padding:0;
margin:0;
list-style: none;
position: relative;
display: inline-table;
background:#e41f3a;}
.menu-top-container ul:after {
    content: ""; clear: both; display: block;}
.menu-top-container ul li {float: left;}    
.menu-top-container ul li:hover {
        background: #FFF;}  
.menu-top-container ul li:hover a {color: #333;}                        
.menu-top-container ul li a {
        display: block; padding: 10px 12px;
        color: #FFF; text-decoration: none;}        
.menu-top-container ul ul {
    background: #FFF;  padding: 0;
    position: absolute; top: 100%;} 
.menu-top-container ul ul li {
        float: none; 
        border-bottom: 1px  dotted #575f6a; position: relative;}        
.menu-top-container ul ul li a {padding: 5px 30px;color:#FFF;}              
.menu-top-container ul ul li a:hover { background: #e41f3a; color:#FFF;}    
.menu-top-container ul ul ul {position: absolute; left: 100%; top:0;}