jquery - 一旦悬停，如何阻止无序列表跳转？

Question

在我工作的公司的时间表内，我确实在努力解决另一个问题，非常感谢您的帮助。一切都按需要工作，我遇到的唯一问题是列表项在悬停时不断跳跃。我已经尝试了我在我的 css 中所知道的一切，从固定的高度和宽度到各种位置，即。固定的、相对的和绝对的似乎都不起作用。我知道这个时间表之前已经过，我感谢所有以前的帮助，但这是不同的。

JSFIDDLE http://jsfiddle.net/Jason1975/9tskrf9q/11/

CSS

* {
            margin: 0;
            padding: 0;
        }

        body {
            background: #ffffff;
            font-family: 'open sans', sans serif, arial;
            font-weight: lighter;
            color: #808080;
            font-size: 14px;
        }
        /* Type */
        h1,h2,h4,h5,h6 {
            text-align: center;
            color: #ccc;
            margin-bottom: 5px;
        }
            h1 {
                font-size: 18px;
            }
            h2 {
                font-size: 14px;
            }
            .section-title, .portfolio-title {
            text-align: center;
            font-size: 36px;
            font-weight: 100;
            text-transform: lowercase;
            margin: 0;
        }
        a   { font-size: 14px; text-decoration: none; color: #666666; }
        a:hover { font-size: 14px; color: #F47C00;  }
        /* Timeline */
        #master {   width: 989px;
                    height: auto;
                    margin: 0 auto; 
        }
        #container {    position: relative;
                        width: 100%;
                        height: 80px;
                        margin: 0 auto;
                        overflow: hidden;
                        white-space:nowrap;
                        background:url(http://www.valueportfolio.co.za/jsfiddle/line.png) center 50% repeat-x;
        }
        ul#new {  display: inline; 
                  position: relative;
                  width: 100%;
                  left: 0;
                  top: 0
        }



        .block-up   {   position: relative;
                        display: inline-block;
                        list-style:none;
                        width: 130px;
                        height: 80px!important;
                        margin: 0!important;
                        top: 0;
                        background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat;

        }
        .block-down {   position: relative;
                        display: inline-block;
                        list-style:none;
                        width:130px;
                        height: 80px!important;
                        margin: 0!important;
                        top: 0;
                        background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat;

        }
        .block-down a   { font-size: 14px; }
        .block-down a:hover { font-size: 14px; }
        .date-up {      padding-bottom: 20px;
                        text-align:center;
        }
        .event-up {     padding-top: 20px;
                        text-align: center;
                        font-size: 14px;
                        color: #F47C00;
                        visibility: hidden;


        }
        .date-down {    padding-top: 20px;
                        text-align:center;


        }
        .event-down {   padding-bottom: 20px;
                        text-align: center;
                        font-size: 14px;
                        color: #F47C00;
                        visibility:hidden;


        }
        #grad_left,
                #grad_right {
                    width: 100px;
                    height: 350px;
                    position: absolute;
                    top: 0;
                }
                    #grad_left {
                        left: 0;
                        background: url('http://www.valueportfolio.co.za/jsfiddle/left-grad.png') repeat-y;
                    }
                    #grad_right {
                        right: 0;
                        background: url('http://www.valueportfolio.co.za/jsfiddle/right-grad.png') repeat-y;
                    }

                #next,
                #prev {
                    position: absolute;
                    top: 0;
                    font-size: 24px;
                    width: 24px;
                    height: 47px;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    text-indent: -9999px;
                    overflow: hidden;
                }
        #next, #prev {
            top: 15px;
        }

                    #next {
                        right: 0;
                        background-image: url('http://www.valueportfolio.co.za/jsfiddle/right.png');
                    }
                    #prev {
                        left: 0;
                        background-image: url('http://www.valueportfolio.co.za/jsfiddle/left.png');
                    }
                        #next.disabled,
                        #prev.disabled {
                            opacity: 0.2;
                        }               

Answer 1

只需添加

vertical-align:top;

到你的.block-up 类

更新fiddle