可變寬度的中心子菜單項

我試圖將子菜單置於菜單項下，但我似乎有它的障礙。這裏是我現在所在的一個工作示例：http://jsfiddle.net/zCWXb/可變寬度的中心子菜單項

由於子菜單有一個可變的寬度，我似乎無法理解如何將它放置在相對於父菜單項的中心位置。

HTML：

<ul class="menu"> 
    <li><a href="#">Menu Item 1</a></li> 
    <li><a href="#">Menu Item 2</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Sub Item 1</a></li> 
      <li><a href="#">Sub Item Long Name Example 2</a></li> 
      <li><a href="#">Sub Item 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu Item 3</a></li> 
</ul>

CSS：

/* 
    NAV 
*/ 
body { 
    background: #000; 
} 

.menu { 
    position: absolute; 
    left: 40px; 
    top: 20px; 
    color: #d6dcbd; 
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif; 
} 
.menu .sub-menu { 
    text-align: center; 
    display:none; 
    padding-top: 4px; 
    width: auto; 
    z-index: 20; 
    position: absolute; 
    left: -6px; 
} 
.menu .sub-menu li { 
    text-align: center; 
    background: #a9d6e4; 
    display: block; 
    float: none; 
    width: auto; 
    white-space: nowrap; 
    padding: 4px 6px; 
    margin-bottom: 3px; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

.menu .sub-menu li a { 
    color: #121212; 
    text-transform: uppercase; 
} 
.menu .sub-menu li:hover { 
    color: #FFF; 
    background: #d6dcbd; 
} 
#menu-default > li { 
    float: left; 
    position: relative; 
} 

.menu li { 
    width: auto; 
    position: relative; 
    display: block; 
    float: left; 
    padding: 0 25px 0 0; 
} 
.menu a { 
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif; 
    color: #d6dcbd; 
    text-decoration: none; 
} 
.menu a:hover { 
    color: #FFF; 
} 

.menu .current-menu-item a { 
    color: #FFF; 
}

jQuery的

$('.menu li').hover(
     //Mouseover, fadeIn the hidden hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeIn('1000'); 
     }, 
     //Mouseout, fadeOut the hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeOut('1000'); 
    })

來源

2012-04-02 Tom

$('.menu li').hover(
     //Mouseover, fadeIn the hidden hover class 
     function() { 
      var $this = $(this), 
       $subMenu = $this.children('.sub-menu') 
      $subMenu.stop(true, true).fadeIn('1000') 
      .css("left", -1*($subMenu.width()/2) + $this.width()/2)   

     }, 
     //Mouseout, fadeOut the hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeOut('1000'); 
});

工作演示 - http://jsfiddle.net/zCWXb/8/

來源

2012-04-02 17:54:36 ShankarSangoli

我結束了使用你的。非常感謝。說得通。 – Tom 2012-04-02 21:21:29

嘗試和更新以下規則：

.menu .sub-menu { 
    /* ... */ 
    left: -25%; 
    margin-left: -50%; 
}

來源

2012-04-02 17:53:31

我剛剛更新了你的jsfiddle這裏是鏈接http://jsfiddle.net/zCWXb/10/

來源

2012-04-02 17:58:34 Jay

http://jsfiddle.net/4Xwwv/

只是我的方法。如果父元素完全位於頁面左側，並且存在居中的長子菜單元素，那麼您將不得不考慮的一件事情是什麼。該元素將離開瀏覽器的左側。

來源

2012-04-02 18:01:52 Fresheyeball

可變寬度的中心子菜單項

回答

相關問題