なぜ幅の変更（jQueryの）

Question

私はdivの

<div class="top_region" id="region"> 
    <span class="logged_email"> 
    <?= $string; ?> 
    </span> 
    <div class="top_arrow" style="cursor: pointer;" id="top_arrow_reg"> 
    <?= img('css/img/top_arrow.png'); ?> 
    </div> 
    <ul class="top_submenu" style="cursor: default;" id="top_submenu_reg"> 
     <li> 
     <a href="<?= base_url() ?>region/bishkek">bishkek</a> 
     </li> 
     <li> 
     <a href="<?= base_url() ?>region/osh">osh</a> 
     </li> 
    </ul> 
    </div> 

を持っている目的は、ULタグはdiv要素と同じ幅を持っている必要があるということですが、問題はときということです私はページをリロードすると、ULはdivより少し幅がありますが、LIリンクをクリックすると通常のdiv width == ul幅になりますが、なぜそれが起こるのか分かりません?? ？

私は誰かがこの瞬間を??説明することができます

$("#top_arrow").toggle(function(){ 

      $("#top_submenu").slideDown(500); 


    }, function(){ 

     $("#top_submenu").slideUp(500); 

    }) 

var width = $(".top_region").width(); 
$(".top_submenu").width(width); 

jQueryの

を使用していて、どのようにそれを修正するために？

CSS正確な理由だ

div.top_region 
{ 
    display: inline-block; 
    margin-right: 40px; 
    margin-left: 20px; 
} 
div.top_region ul.top_submenu 
{ 
    /*width: 100px;*/ 
    /*left: -105px;*/ 
    margin: 0; 
    padding: 0; 
} 
span.logged_email 
{ 
    background: #333335; 
    color: #dbdcde; 
    font-size: 10pt; 
    padding: 5px; 
    padding-top: 2px; 
    padding-bottom: 4px; 
    padding-left: 30px; 
    padding-right: 30px; 
    font-weight: bold; 
    border-radius: 3px 0 0 3px; 
    -webkit-border-radius: 3px 0 0 3px; 
    -moz-border-radius: 3px 0 0 3px; 
} 
div.top_arrow 
{ 
    display: inline-block; 
    margin-left: 1px; 
    position: relative; 
    behavior: url('border-radius.htc'); 
    width: 20px; 
} 
div.top_arrow img 
{ 
    border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    -moz-border-radius: 0 3px 3px 0; 
    behavior: url('border-radius.htc'); 
    margin-top: 1px; 
} 
ul.top_submenu 
{ 
    position: absolute; 
    display: none; 
    background: #303030; 
    font-size: 8pt; 
    display: none; 
    /*width: 180px;*/ 
    list-style: none; 
    text-align: left; 
    padding: 0; 
    margin: 0; 
    /*left: -170px;*/ 
    padding-left: 5px; 
    padding-right: 5px; 
    height: 70px; 
    color: white; 
} 
ul.top_submenu li 
{ 
    border-bottom: 1px solid #969696; 
    padding-left: 3px; 
} 
ul.top_submenu li:last-child 
{ 
    border-bottom: none; 
} 
ul.top_submenu li a 
{ 
    text-decoration: none; 
    color: white; 
} 

Answer 1

：

var width = $(".top_region").width(); 
$(".top_submenu").width(width);​ 

それらの幅が等しいです。 はそれを作る：

var width = $(".top_region").width(); 
$(".top_submenu").width(width-2);​ 

---

アップデートを： あなたのコードに多少の誤差があります。私のフィドルを見てください： http://jsfiddle.net/LwGJX/7/