html - 菜单在顶部和底部悬停和填充

Question

我有一个带有子菜单的菜单，我在鼠标悬停时在底部添加了边框，但是当我将鼠标悬停在菜单上时，菜单高度会增加一点，当我放置时，整个菜单在顶部和底部占用一个空间它在一个 div 中。

这是我的 fiddle :http://jsfiddle.net/p7Nsf/

<div class="head"></div>

<div class="menudiv">
<div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                        <ul>
                        <li><a href="#">School</a></li>
                        <li><a href="#">Vision and Mission </a></li>
                        <li><a href="#">Principal’s desk</a>
                        <li><a href="#">Management</a>
                        </ul> </li>
                <li><a href="#">Admission</a>
                        <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Download application form</a></li>
                        </ul> </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">School Calander</a></li>
                <li><a href="#">News & Events</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>               
            </ul>
        </div>
</div><!-- menu div ends-->

<div class="foot"></div>

CSS

.menudiv
{
    width:980px;
}

.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}

.menu ul ul {
    display: none;
}

.menu ul li:hover > ul {
        display: block;

}

.menu ul {
    background: #111312;

    list-style: none;
    position: relative;
    display: inline-table;
    border:3px solid #111312;
-moz-border-radius: 3px;
    -webkit-border-radius: 3px;

}
.menu ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

.menu ul li {
    float: left;
}
.menu ul li:hover {
    background: #111312;
    border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
    color: #fff;
}

.menu ul li a {
    display: block; 
    padding-top: 10px;     padding-left: 25px;     padding-right: 25px;     padding-bottom: 10px;
    color: #fff; 
    text-decoration: none;
}

.menu ul ul {
    background: #111312;
    padding: 0;
    position: absolute; 
    top: 100%;
}
.menu ul ul li {
    float: none; 
    position: relative;
}
.menu ul ul li a {
    padding: 10px;
    color:#000;
    display: block; 
}   
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}

.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
    padding: 0;
}

.menu ul ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink; 
    position: relative;
}

.menu ul ul ul li a { 
    padding: 10px;
    color: #fff;
    display: block; 
}

.menu ul ul ul li a:hover {
  background: #95CEF1;
  color: #000;
}

.menu ul ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

.head
{
   width:500px;
    height:200px;
    background:#789;
}

.foot
{
   width:500px;
    height:200px;
    background:#123;
}

Answer 1

试试这个，你的菜单项会跳转，因为你给元素添加了边框，所以它的高度增加了 3 px 边框

.menu ul li {
    float: left;
    border-bottom: 3px solid transparent;
}

http://jsfiddle.net/p7Nsf/1/

减少 anchor 上的填充以补偿 3px

.menu ul li a {
    padding-bottom: 7px;
}

http://jsfiddle.net/p7Nsf/2/

更新

.menu ul {
    background: none repeat scroll 0 0 #111312;
    border: 3px solid #111312;
    display: inline-table;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}

我删除了显示 Prop

http://jsfiddle.net/p7Nsf/4/