我有一个问题居中的图像。地址是
http://burger-laden.de/preview/
如您所见,有一个箭头移动的菜单。我的问题是现在我需要箭头始终位于文本的中心。这里的代码:
CSS:
.navigation .bottom {
font-weight: bold;
font-size:16px;
}
.lavaLampBottomStyle {
position: relative;
overflow: hidden;
height: 46px;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
background: url(../images/menu_top_arrow.png) no-repeat;
background-position: left 0px;
margin-top: 33px;
margin-left: 20px;
height: 46px;
width: auto;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
text-decoration: none;
color: white;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
position: relative;
overflow: hidden;
float: left;
margin: auto 0px;
}
这是html
<ul class="lavaLampBottomStyle" id="1">
<li><a href="#">Startseite</a></li>
<li class="current"><a href="#">Speisekarte</a></li>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
这里是lavalamp js
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);
谢谢