（奇数の境界線があり、動的にする必要があります）

Question

私は、次のHTML

<ul id="header"> 
     <li class="dropdown"><span>Our Locations</span> 
      <ul> 
       <li><a href="">London</a></li> 
       <li><a href="">New York</a></li> 
      </ul> 
     </li> 
    <li class="dropdown"><span>Language Selector</span> 
     <ul> 
      <li><a href="">English</a></li> 
      <li><a href="">German</a></li> 
      <li><a href="">French</a></li> 
      <li><a href="">Chinese</a></li> 
      <li><a href="">Mandarin</a></li> 
     </ul> 
    </li> 
</ul> 

そして、どのメニューを取得しようとしていますがあります次のよう

は困難な背景の奇妙な形状とテキストは、サイトの翻訳に伴って変化するという事実に見えます。現時点では

私は次のJavaScript

(function ($) { 

    $.fn.dropDownMenu = function() { 
     $.each(this, function() { 
      var li = $(this); 
      li.hover(function() { 
       $(this).addClass("hover"); 
       $('ul:first', this).css('visibility', 'visible'); 
      }, function() { 
       $(this).removeClass("hover"); 
       $('ul:first', this).css('visibility', 'hidden'); 
      }); 
     }); 
    } 

    $(function() { 
     $(".dropdown").dropDownMenu(); 
    }); 

})(jQuery); 

を持って、私はおそらく働いて見ることができる唯一の方法は絶対に私のボックスに、zインデックスを与える（li.dropdownに含まれる）、内側ULを配置であります左/右/上の枠線を使用して2つのボックスの結合を取得し、次に余分なdivを追加して重なり合った親liをカバーするために、上の親liを追加します。もっと良い方法があるのだろうか？

Answer 1

これを試してみるにはちょっと時間がかかりましたが、クロスブラウザではテストしていませんが、IE 9で動作します。

#header { 
    margin:0; 
    padding:6px 0 5px 0; 
    background-color:#FFFFFF; 
    list-style-type:none; 
} 

li.dropdown { 
    position:relative; 
    display:inline; 
    margin:0; 
    padding:0; 

} 

div.borderMask { 
    position:absolute; 
    display:none; 
    background-color:#FFFFFF; 
    padding:1px; 
    height:1px; 
    line-height:1px; 
    right:0px; 
    left:0px; 
    top:13px; 
    z-index:1000; 
} 

li.dropdown ul { 
    position:absolute; 
    display:none; 
    background-color:#FFFFFF; 
    border:solid 1px #CCCCCC; 
    width:150px; 
    right:-1px; 
    top:13px; 
} 

li.dropdown:hover { 
    background-color:#FFFFFF; 
    border-top:solid 1px #CCCCCC; 
    border-left:solid 1px #CCCCCC; 
    border-right:solid 1px #CCCCCC; 
} 

li.dropdown:hover ul { 
    display:inline; 
} 
li.dropdown:hover div.borderMask { 
    display:block; 
} 

HTML：：

<ul id="header"> 
    <li class="dropdown"><span>Our Locations</span> 
     <div class="borderMask"></div> 
     <ul> 
      <li><a href="">London</a></li> 
      <li><a href="">New York</a></li> 
     </ul> 
    </li> 
    <li class="dropdown"><span>Language Selector</span> 
     <div class="borderMask"></div> 
     <ul> 
      <li><a href="">English</a></li> 
      <li><a href="">German</a></li> 
      <li><a href="">French</a></li> 
      <li><a href="">Chinese</a></li> 
      <li><a href="">Mandarin</a></li> 
     </ul> 
    </li> 
</ul>