为什么菜单背景颜色不能改变？

我已经创建了2个菜单：prod & prod2，我发现当鼠标重点在prod2上时，背景颜色发生了变化，但是当鼠标重点在prod1上时，背景颜色不会改变，为什么它不会改变？为什么菜单背景颜色不能改变？

HTML

<body>   
    <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 
</body>

CSS

<style>    
     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; 
     } 
    </style>

的Javascript

<script>      
      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=""; 
      } 

    </script>

来源

2013-10-10 Harim

给CSS

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

来源

2013-10-10 06:32:17

如果我添加.arrow_box {位置：绝对的; white-space：nowrap}， prod1菜单布局将更改为1列。 – Harim

@Harim你可以让这个小提琴plz我会为你做 –

喜迪基，我的英语不好，“你可以让这个小提琴”是什么意思？ – Harim

为什么菜单背景颜色不能改变？

回答

相关问题