Question

我想为子菜单制作子菜单，并在子菜单悬停时更改主菜单和背景颜色的背景颜色。这是我的代码，我应该做些什么改变？在子菜单和子菜单的子菜单中看不到绿色背景。

  #horizontalmenu ul {
    padding: 1;
    margin: 1;
    list-style: none;
  }

  #horizontalmenu li {
    float: left;
    position: relative;
    padding-right: 100;
    display: block;
    border: 4px solid #CC55FF;
    border-style: inset;
  }

  #horizontalmenu li ul {
    display: none;
    position: absolute;
  }

  #horizontalmenu li: hover ul {
    display: block;
    background: red;
    height: auto;
    width: 8em;
    background-color: green;
  }

  #horizontalmenu li ul li {
    clear: both;
    border-style: none;
  }

HTML

<div id="horizontalmenu"> 

 <ul> 
 <li>
 <a href="#">News</a> 
 <ul> 
 <li>
 <a href="#">National</a></li> 
 <li>
 <a href="#">International</a></li> 
 <li><a href="#">Sport</a></li> 
 <li><a href="#">Hollybood</a></li> </ul> </li> 

 <li> <a href="#">Technology</a> 
 <ul> <li><a href="#">IT/Software</a></li> 
 <li><a href="#">Hardware</a></li> 
 <li><a href="#">Iphone</a>
 <ul><li><a href="#">IT/Software</a></li> </ul></li> 

 <li><a href="#">Neuro-Science</a></li> </ul> </li> 

 <li> <a href="#">Sports</a> 
 <ul> <li><a href="#">Cricket</a></li> 
 <li><a href="#">Tenis</a></li> 
 <li><a href="#">Badminton</a></li> 
 <li><a href="#">Hockey</a></li> </ul> </li> 

 <li> <a href="#">Country</a> 
 <ul> <li><a href="#">India</a></li> 
 <li><a href="#">America</a></li> 
 <li><a href="#">France</a></li> 
 <li><a href="#">Pakistaan</a></li> 
 </ul>
 </li>
 </ul> 
 </div>

如何通过css使子菜单可见？

0 个答案: