化妝的CSS菜單浮動權

Question

我有這個CSS代碼爲我horiontal菜單：

.nav-wrap { 
    float:right; 
} 

/* Clearfix */ 
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } 
*:first-child+html .group { zoom: 1; } /* IE7 */ 

/* Example One */ 
#example-one { 
    margin: 0 auto; 
    list-style: none; 
    position: relative; 
    width: 960px; 
} 
#example-one li { 
    display: inline-block; 
} 
#example-one a { 
    color: #ffffff; 
    font-size: 14px; 
    float: left; 
    padding: 6px 10px 4px 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
#example-one a:hover { 
    color: #000000; 
} 
#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 4px; 
    background: #000000; 
} 
.current_page_item a { 
    color: #000000 !important; 
} 
.ie6 #example-one li, .ie7 #example-one li { 
    display: inline; 
} 
.ie6 #magic-line { 
    bottom: -3px; 
} 

我怎樣才能使菜單浮動在頁面右側的頭部DIV（寬960像素）和一個標誌，內浮動離開旁邊的菜單

這裏是我有：http://jsfiddle.net/Mqs22/1/

和這裏是我曾嘗試：http://jsfiddle.net/ccZFs/

Answer 1

你浮法必須在lis上，以及包裝。就像這樣：

#example-one li { 
    display: inline-block; 
    float: right; 
} 

小提琴：http://jsfiddle.net/KyleMuir/Mqs22/2/

希望這有助於。

Answer 2

我得到了這兩個元素爲你工作。

我用position: absolute;在那裏。

HTML

<div class="nav-wrap"> 
    <ul class="group" id="example-one"> 
    <li class="current_page_item"><a href="#">Home</a></li> 
    <li><a href="#">Buy Tickets</a></li> 
    <li><a href="#">Group Sales</a></li> 
    <li><a href="#">Reviews</a></li> 
    <li><a href="#">The Show</a></li> 
    </ul> 
</div> 

jQuery的

var $el, leftPos, newWidth; 
    $mainNav2 = $("#example-two"); 

/* 
    EXAMPLE ONE 
*/ 

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */ 
$("#example-one").append("<li id='magic-line'></li>"); 

/* Cache it */ 
var $magicLine = $("#magic-line"); 

$magicLine 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

$("#example-one li").find("a").hover(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 

    $magicLine.stop().animate({ 
     left: leftPos, 
     width: newWidth 
    }); 
}, function() { 
    $magicLine.stop().animate({ 
     left: $magicLine.data("origLeft"), 
     width: $magicLine.data("origWidth") 
    });  
}); 

爲了使MagicLine工作，你需要增加他們使用的是jQuery的，以及確保你已經jQuery的有關工作小提琴。

您在ul上有一個width: 960px;，導致它不能正確對齊。

JSFIDDLE