爲什麼菜單背景顏色不變？

Question

我已經創建了2 menus:prod & prod2，我發現當mouse focus on prod2，背景顏色改變了，但是當鼠標重點在prod1 the background color doesn't change。

爲什麼它不改變？

樣式：

ul.hMenu { 
    margin: 0; 
    padding: 0; 
    z-index: 1;     
} 
ul.hMenu > li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    width:140px; 
} 
ul.hMenu li a { 
    display: block; 
    text-align: left; 
    text-decoration: none 
}   
ul.hMenu li > div {      
    position: absolute;    
    display: none;     
} 
ul.hMenu div a {background: yellow;  
}   

div.lay1{ float:left;} 
div.lay1 br{line-height:50%} 
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;} 
.secondMenu{font:12px arial;color:#000000;text-decoration: none;} 
.arrow_box { 
    position: relative; 
    background: red; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
.arrow_box:after { 
    border-color: rgba(149, 213, 53, 0); 
    border-bottom-color: red; 
    border-width: 13px; 
    left: 10%; 
    margin-left: -13px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 19px; 
    left: 10%; 
    margin-left: -19px; 
} 

腳本：

function showMenu(obj){    
    var a=obj.children[0]; 
    a.style.color="blue"; 
    var div = obj.children[1]; 
    obj.style.backgroundColor="yellow"; 


    div.style.display="block"; 

} 
function hideMenu(obj){ 
    var a=obj.children[0]; 
    a.style.color="red"; 
    var div = obj.children[1];   
    div.style.display="none"; 
    obj.style.backgroundColor=""; 
} 

HTML：

<ul class="hMenu">   
    <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"> 
     <a style="color: red;" href="javascript:void(0);">prod</a>    
     <div><br/> 
      <!-- here--> 
      <div class="arrow_box" > 
       <div class="lay1"> 
        <div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div> 
        <br><br> 
        <div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
       </div> 
      </div> 
     </div> 
    </li>  
    <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"> 
     <a style="color: red;" href="javascript:void(0);">prod2</a> 
     <div class="arrow_box">            
      <div class="lay1"> 
       <div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div> 
       <br><br> 
       <div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
      </div> 
     </div> 
    </li> 
</ul> 
<br/><br/><br/><br/><br/> 
Test 

Problem In JsFiddle

Answer 1

我測試了你的代碼，它工作正常！你的瀏覽器是什麼？請將演示，並添加該代碼以及

a.setAttribute('style','background-color:blue'); 

一些瀏覽器不兼容element.style

Answer 2

請檢查您的HTML：

因爲你執行相同功能的兩個Pord or Pord2但內部HTML是li不同。所以function showMenu()兩個Pord or Pord2作品不同：

HTML：

<ul class="hMenu"> 
     <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;" 
      href="javascript:void(0);">prod</a>   
      <div class="arrow_box"> 
      <br /> 
       <div class="lay1"> 
        <div> 
         <a href="" class="topMenu">Manage Content</a><br> 
         <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a> 
        </div> 
        <br /> 
        <br /> 
        <div> 
         <a href="" class="topMenu">Manage Assignment</a><br> 
         <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
       </div> 
      </div> 
     </li> 
     <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;" 
      href="javascript:void(0);">prod2</a>    
      <div class="arrow_box"> 
      <br /> 
       <div class="lay1"> 
        <div> 
         <a href="" class="topMenu">Manage Content</a><br> 
         <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a> 
         <br> 
         <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a> 
        </div> 
        <br /> 
        <br /> 
        <div> 
         <a href="" class="topMenu">Manage Assignment</a><br> 
         <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
       </div> 
      </div> 
     </li> 
    </ul> 

Try This

修訂

將<br />之前arrow_box DIV兩個li和一些零錢到JavaScript：

var div = obj.children[2]; 

使用Javascript -

function showMenu(obj){ 
       var a=obj.children[0]; 
       a.style.color="blue"; 
       var div = obj.children[2]; 
       obj.style.backgroundColor="yellow"; 
       div.style.display="block"; 
      } 

    function hideMenu(obj){ 
       var a=obj.children[0]; 
       a.style.color="red"; 
       var div = obj.children[2];   
       div.style.display="none"; 
       obj.style.backgroundColor=""; 
      } 

Updated Jsfiddle

Answer 3

給予CSS像這樣

.arrow_box{ position:absolute; white-space:nowrap} 

入住這

http://jsfiddle.net/zz5XJ/2/

Answer 4

嘗試下面的HTML：

  <body>   
       <ul class="hMenu">   
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"> 
         <a style="color: red;" href="javascript:void(0);">prod</a>    
          <div class="arrow_box" > 
           <div class="lay1"> 
            <div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div> 
            <br><br> 
            <div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
           </div> 
          </div> 

        </li>  
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"> 
         <a style="color: red;" href="javascript:void(0);">prod2</a> 
         <div class="arrow_box">            
          <div class="lay1"> 
           <div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div> 
           <br><br> 
           <div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div> 
          </div> 
         </div> 
        </li> 
       </ul> 
       <br/><br/><br/><br/><br/> 
       Test 
      </body>