Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This drop down menu works well in HTML but when i move it to wordpress template, there is a gap between and it's container (.menu-top-container). when the mouse on the menu you will find the gap. http://www.jamesxu.com.au/temp/

The funny thing is I copy all the css in the wordpress to a HTML,the gap is gone.Why?

.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;}
share|improve this question

closed as off topic by kaiser, Johannes Pille, Michael, anu, toscho May 2 '13 at 9:33

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

add comment

1 Answer 1

It looks like this display: inline-table; is causing the extra space to appear at the bottom. You can fix it by adding margin: 0 0 -4px; to the item .menu-top-container ul li

I found some help information on these inline objects, here.

It seems to be used to center the menu in that navigation, but it's not supported by IE 7 and below. Maybe you can find another way to accomplish the centering that may not require the negative bottom margin?

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.