Jquery 消除CSS中两个矩形之间的间隙_Jquery_Css

Jquery 消除CSS中两个矩形之间的间隙

jquery css

Jquery 消除CSS中两个矩形之间的间隙,jquery,css,Jquery,Css,我用jquery和CSS创建了一个菜单项，但它在菜单项中有一个间隙。一个项目放在另一个站点的顶部。我想消除这个间隙，并将每个删除项按一个一个的顺序推，如图所示。我该怎么做这是菜单项的图像。。。这是我的CSS文件 *{ margin:0; padding:0; } body{ background:#000; font-family:"Trebuchet MS", Helvetica, sans-serif; font-size:15px;

我用jquery和CSS创建了一个菜单项，但它在菜单项中有一个间隙。一个项目放在另一个站点的顶部。我想消除这个间隙，并将每个删除项按一个一个的顺序推，如图所示。我该怎么做

这是菜单项的图像。。。

这是我的CSS文件

    *{
    margin:0;
    padding:0;
}
body{
    background:#000;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size:15px;
    color: #fff;
    text-transform:uppercase;
    overflow-x:hidden;
}
.oe_overlay{
    background:#000;
    opacity:0;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
ul.oe_menu{
    list-style:none;
    position:relative;
    margin:60px 0px 0px 40px;
    width:967px;
    float:left;
    clear:both;
}
ul.oe_menu > li{
    width:112px;
    height:50px;
    padding-bottom:2px;
    float:left;
    position:relative;
}
ul.oe_menu > li > a{
    display:block;
    background-color:#101010;
    color:#aaa;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    width:138px;
    height:30px;
    padding:10px;
    margin:1px;
    text-shadow:0px 0px 1px #000;
    opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
    background:#fff;
    color:#101010;
    opacity:1.0;

}
.oe_wrapper ul.hovered > li > a{
    background:#fff;
    text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
    position:absolute;
    top:50px;
    left:1px;
    background:#fff;
    width:967px;
    height:180px;
    padding:30px;
    display:none;
}
ul.oe_menu div ul li a{
    text-decoration:none;
    color:#222;
    padding:2px 2px 2px 4px;
    margin:2px;
    display:block;
    font-size:12px;
}
ul.oe_menu div ul.oe_full{
    width:100%;
}
ul.oe_menu div ul li a:hover{
    background:#000;
    color:#fff;
}
ul.oe_menu li ul{
    list-style:none;
    float:left;
    width: 150px;
    margin-right:10px;
}
li.oe_heading{
    color:#aaa;
    font-size:16px;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:1px solid #ddd;
}

这是我的html

     <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="" />
        <meta name="keywords" content=""/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/Aller.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('ul.oe_menu div a',{hover: true});
            Cufon.replace('h1,h2,.oe_heading');
        </script>
        <style type="text/css">
            span.reference{
                position:fixed;
                left:0px;
                bottom:0px;
                background:#000;
                width:100%;
                font-size:10px;
                line-height:20px;
                text-align:right;
                height:20px;
                -moz-box-shadow:-1px 0px 10px #000;
                -webkit-box-shadow:-1px 0px 10px #000;
                box-shadow:-1px 0px 10px #000;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                margin-right:10px;

            }
            span.reference a:hover{
                color:#ddd;
            }
            .bg_img img{
                width:100%;
                position:fixed;
                top:0px;
                left:0px;
                z-index:-1;
            }
            h1{
                font-size:75px;
                text-align:right;
                position:absolute;
                right:40px;
                top:20px;
                font-weight:normal;
                /*text-shadow:  0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff;
            */}
            h1 span{
                display:block;
                font-size:15px;
                font-weight:bold;
            }
            h2{
                position:absolute;
                top:220px;
                left:50px;
                font-size:40px;
                font-weight:normal;
                /*text-shadow:  0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00;
*/}
        </style>
    </head>

    <body>
        <div class="bg_img"><img src="images/1.jpg" alt="background" /></div>
        <h1>Duke Fashion<span>Overlay Effect Menu with jQuery</span></h1>
        <h2>Welcome to the world of fashion</h2>

        <div class="oe_wrapper">
            <div id="oe_overlay" class="oe_overlay"></div>
            <ul id="oe_menu" class="oe_menu">
                <li><a href="">Collections</a>
                    <div>
                        <ul>
                            <li class="oe_heading">Summer 2011</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Special Events</a></li>
                            <li><a href="#">Runway Show</a></li>
                            <li><a href="#">Overview</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Winter 2010</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">Behind the scenes</a></li>
                            <li><a href="#">Interview</a></li>
                            <li><a href="#">Photos</a></li>
                            <li><a href="#">Download</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Categories</li>
                            <li><a href="#">Casual</a></li>
                            <li><a href="#">Business</a></li>
                            <li><a href="#">Underwear</a></li>
                            <li><a href="#">Nature Pure</a></li>
                            <li><a href="#">Swimwear</a></li>
                            <li><a href="#">Evening</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Projects</a>
                    <div style="left:-111px;"><!-- -112px -->
                        <ul>
                            <li class="oe_heading">Fashion Shows</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Events</li>
                            <li><a href="#">Fashion Party 2011</a></li>
                            <li><a href="#">Evening specials</a></li>
                            <li><a href="#">Fashion Day Milano</a></li>
                            <li><a href="#">Model Workshops</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Media</li>
                            <li><a href="#">Wallpapers</a></li>
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Images</a></li>
                            <li><a href="#">Contest 2011</a></li>
                            <li><a href="#">Fashion Mania</a></li>
                            <li><a href="#">Green Earth Day</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Fragrances</a>
                    <div style="left:-223px;">
                        <ul class="oe_full">
                            <li class="oe_heading">Fashion Fragrances</li>
                            <li><a href="#">Deálure</a></li>
                            <li><a href="#">Violet Woman</a></li>
                            <li><a href="#">Deep Blue for Men</a></li>
                            <li><a href="#">New York, New York</a></li>
                            <li><a href="#">Illusion</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Events</a>
                    <div style="left:-335px;">
                        <ul>
                            <li class="oe_heading">Shows 2010</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Shows 2011</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Special Events</li>
                            <li><a href="#">Fashion Party 2011</a></li>
                            <li><a href="#">Fashion Countdown Party 2010</a></li>
                            <li><a href="#">Fashion Day Milano</a></li>
                            <li><a href="#">Model Workshops</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Stores</a>
                    <div style="left:-447px;">
                        <ul>
                            <li class="oe_heading">Europe</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Asia</li>
                            <li><a href="#">Hong Kong</a></li>
                            <li><a href="#">Tokio</a></li>
                            <li><a href="#">New Delhi</a></li>
                            <li><a href="#">Beijing</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">United States</li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Seattle</a></li>
                            <li><a href="#">Miami</a></li>
                        </ul>
                    </div>
                </li>
               <li><a href="">My table</a>
                    <div style="left:-559px;">
                        <ul>
                            <li class="oe_heading">Europe</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Asia</li>
                            <li><a href="#">Hong Kong</a></li>
                            <li><a href="#">Tokio</a></li>
                            <li><a href="#">New Delhi</a></li>
                            <li><a href="#">Beijing</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">United States</li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Seattle</a></li>
                            <li><a href="#">Miami</a></li>
                        </ul>
                    </div>
                </li>
                 <li><a href="">Admin</a>
                    <div style="left:-671px;">
                        <ul>
                            <li class="oe_heading">Europe</li>
                            <li><a href="#">Milano</a></li>
                            <li><a href="#">Paris</a></li>
                            <li><a href="#">Berlin</a></li>
                            <li><a href="#">London</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">Asia</li>
                            <li><a href="#">Hong Kong</a></li>
                            <li><a href="#">Tokio</a></li>
                            <li><a href="#">New Delhi</a></li>
                            <li><a href="#">Beijing</a></li>
                        </ul>
                        <ul>
                            <li class="oe_heading">United States</li>
                            <li><a href="#">New York</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Seattle</a></li>
                            <li><a href="#">Miami</a></li>
                        </ul>
                    </div>
                </li>
            </ul>   
        </div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/">back to the Codrops tutorial</a>
                <a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Background image by Duke Photo</a>
            </span>
        </div>


替换（'ul.oe_menu div a'，{hover:true}）；
Cufon.替换（“h1、h2、oe_标题”）；
span.reference{
位置：固定；
左：0px；
底部：0px；
背景：#000；
宽度：100%；
字体大小：10px；
线高：20px；
文本对齐：右对齐；
高度：20px；
-moz盒阴影：-1px 0px 10px#000；
-网络工具包盒阴影：-1px 0px 10px#000；
盒影：-1px 0px 10px#000；
}
参考文献a{
颜色：#aaa；
文本转换：大写；
文字装饰：无；
右边距：10px；
}
参考a：悬停{
颜色：#ddd；
}
.bg_img img{
宽度：100%；
位置：固定；
顶部：0px；
左：0px；
z指数：-1；
}
h1{
字体大小：75px；
文本对齐：右对齐；
位置：绝对位置；
右：40px；
顶部：20px；
字体大小：正常；
/*文本阴影：0 0 3px#0096ff，0 0 10px#fff，0 0 20px#fff，0 0 30px#fff，0 0 0 40px#0096ff，0 0 70px#0096ff，0 0 80px#0096ff，0 0 100 px#0096ff，0 0 0 150px 356ff；
*/}
h1跨度{
显示：块；
字体大小：15px；
字体大小：粗体；
}
氢{
位置：绝对位置；
顶部：220px；
左：50px；
字体大小：40px；
字体大小：正常；
/*文本阴影：0 0 3px#f6ff00，0 0 10px#fff，0 0 20px#fff，0 0 30px#fff，0 0 0 40px#f6ff00，0 0 0 70px#f6ff00，0 0 0 80px#f6ff00，0 0 0 100px#f6ff00，0 0 150px#f6ff00；
*/}
Duke Fashion使用jQuery覆盖效果菜单
欢迎来到时尚世界



2011年夏季







2010年冬季








类别










时装秀







事件






媒体










时尚香水









2010年展会







2011年展会







特殊活动