隠しdivに<a>要素を追加した後にCSSドロップダウンが動作しない

Question

私のWeb用CSSドロップダウンメニューを作成しましたが、基本的に隠しdiv <div id="category_list">display: none;プロパティが設定されています。誰かが<li id="category_drop"><a class="st_nav_menu" href="#">の上を移動すると、display: block;をhidden divに設定します。それはうまく動作しますが、一旦私は<a></a>タグを隠しdivに追加すると、すべてのドロップダウンの作業が停止し、私は理由が分かりません。ここで

は <div id="category_list"> http://jsfiddle.net/JCZbt/内部 <a></a>タグwithouth私のコード（ドロップダウンメニューを見て、「カテゴリ」の上にマウスを移動）

でjsFidleであり、これは私のコードです。

HTML

<div id="headbar-wrap"> 
<p id="back-top"><a href="#top"><span></span></a></p> 
    <div id="head-bar"> 
     <h1><a href="http://website.com/">website</a></h1> 
     <ul class="main-menu"> 
      <li><a class="st_nav_menu" href="index.php">Home</a></li> 
      <li id="category_drop"><a class="st_nav_menu" href="#">Categories 
       <div id="category_list"> 

       </div> 
      </a></li> 
      <li><a class="st_nav_menu" href="top.php">Top</a></li> 
      <li><a class="st_nav_menu" href="anti-top.php">Anti Top</a></li> 
      <li class="st_add_button"><a href="#">Add Story</a></li> 
     </ul> 
     <ul class="main-2-menu"> 
     <li><a><span style="color: red; font-weight: bold; font-size: 16px; line-height: 44px; padding: 0 10px 0 10px;">Website is under construction.</span></a></li> 
     </ul> 
    </div> 
</div> 

CSS

/* Header */ 
.st_add_button { 
    display: block; 
    padding: 15px 16px 15px 16px; 
} 

.st_add_button a { 
    color: #fff; 
    background: url("/images/st_add.png") no-repeat 4px 0 #3fab3c; 
    padding: 5px 5px 5px 37px; 
    text-shadow: 0 -1px #328c30; 
    font-weight: bold; 
    font-size: 12px; 
    line-height: 11px; 
    border: 1px solid #000; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 

.st_add_button a:hover { 
    background-color: #4dc24a; 
} 

#headbar-wrap { 
    background-color: #222; 
    min-width: 896px; 
    border-bottom: 1px solid #333; 
    border-top: 1px solid #333; 
    box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); 
    -moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); 
    -webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); 
    position: fixed; 
    width: 100%; 
    z-index: 15; 
    top: 0; 
} 

#head-bar { 
    height: auto; 
    max-width: 896px; 
    margin: 0 auto; 
} 

#head-bar a { 
    -webkit-transition: color .2s linear; 
    -moz-transition: color .2s linear; 
} 

#head-bar h1 { 
    float: left; 
} 

#head-bar h1 a { 
    display: block; 
    padding: 14px 18px 10px 0; 
    height: 20px; 
    line-height: 20px; 
    font-size: 18px; 
    width: 110px; 
    text-indent: -9999px; 
    overflow: hidden; 
    background: url("/images/logo.png") no-repeat 0 7px; 
    border-right: 1px solid #333; 
    box-shadow: -1px 0 #000 inset; 
    -moz-box-shadow: -1px 0 #000 inset; 
    -webkit-box-shadow: -1px 0 #000 inset;  
} 

#head-bar h1 a:hover { 
    background-position: 0 -64px; 
} 


#head-bar h1 a:active { 
    background-position: 0 -62px; 
} 

#head-bar ul { 
    list-style-type: none; 
    overflow: hidden; 
} 

#head-bar ul.main-menu { 
    float: left; 
} 

#head-bar ul.main-menu li{ 
    float: left; 
} 

.st_nav_menu { 
    color: #999; 
    display: block; 
    font-weight: bold; 
    font-size: 12px; 
    line-height: 11px; 
    height: 10px; 
    padding: 17px 16px 17px 16px; 
    border-right: 1px solid #333; 

    box-shadow: -1px 0 #000 inset; 
    -moz-box-shadow: -1px 0 #000 inset; 
    -webkit-box-shadow: -1px 0 #000 inset; 
    text-shadow: 0 -1px #000; 
} 

#head-bar ul.main-menu li a:hover { 
    color: #fff; 
    text-shadow: 0 1px #000; 
} 

#head-bar ul.main-2-menu { 
    float: right; 
    overflow: visible; 
    border-left: 1px solid #000; 
    border-right: 1px solid #333; 
} 

#head-bar ul.main-2-menu li { 
    float: left; 
    height: auto; 
    border-left: 1px solid #333; 
    border-right: 1px solid #000; 
} 
/*CSS Drop Down */ 
#category_list { 
    display: none; 
    height: 200px; 
    width: 400px; 
    padding: 10px; 
    background: #1c1c1c; 
    position: absolute; 
    z-index: 999; 
    top: 45px;  
    margin-left: -211px; 
    border: 1px solid #000; 

    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
    border-radius: 0 0 4px 4px; 

    box-shadow: 1px 1px 4px #333; 
    -moz-box-shadow: 1px 1px 4px #333; 
    -webkit-box-shadow: 1px 1px 4px #333; 
} 

#category_drop .st_nav_menu:hover #category_list, #johan { 
    display: block; 
} 

---

誰が、なぜ一度<a></a>タグが隠さ<div id="category_list">に追加された作業の停止をドロップダウン提案することはできますか？

Answer 1

<div id="category_list"></div>の後ではなく、</a>タグがカテゴリテキストの直後にあってはなりません。それはあなたがアンカーの中にアンカーを入れようとしていることを意味し、それが問題になる可能性があります。アンカー - - DIV - 近くのdiv - 近いアンカー - 近いリスト項目

そう...

<li id="category_drop"><a class="st_nav_menu" href="#">Categories 
    <div id="category_list"> 
    </div> 
</a></li> 

は

<li id="category_drop"><a class="st_nav_menu" href="#">Categories</a> 
    <div id="category_list"> 
    </div> 
</li> 

Answer 2

<li id="category_drop"><a class="st_nav_menu" href="#">Categories 
      <div id="category_list"> 

      </div> 
     </a></li> 

リストアイテムになります。

HTML5の場合、<> < div> </div> </a>で取得できます。 HTML5以前は無効なマークアップです。

HTMLのないバージョンが<> <> </A> </A>または<> < div>の< A> </A> </div>の</A>ことができます。あなたは別のアンカーの中にアンカーを入れようとしており、それは単に機能しません。あなたが<a>タグの内側に<a>タグを置くことはありません

Answer 3

今では

<li id="category_drop"> 
<a href="#" class="st_nav_menu">Categories</a> 
<div id="category_list"> 
    <a href="#" class="st_nav_menu"></a> 
    <a href="#"></a> 
</div> 
</li> 

代わりの

<li id="category_drop"> 
<a class="st_nav_menu" href="#">Categories 
    <div id="category_list"> 
    <a href="#">fdsf</a> 
    </div> 
</a> 
</li>