第二级子菜单背景/加载问题的CSS菜单

Question

使用css menumaker菜单在这里找到：http://cssmenumaker.com/menu/grey-impression-drop-down-menu-0我试图创建子菜单的第三级。

这里是一个HTML和CSS的例子。 http://jsfiddle.net/it_levon/ew4MP/

通过CSS我能够添加> .cssmenu li：hover ul {display：block} 所以它看起来像.cssmenu li：hover> ul {display：block}。这会加载子菜单项，但它将突出显示“产品1”和“蓝色”，就好像您正在选择两个项目一样，即使与每个项目关联的链接都正确工作。我希望有人能够帮助我弄清楚如何让用户在悬停时突出显示的项目突出显示，并尽可能让第三级子菜单向右移动以使其看起来像是在扩展。

在此先感谢

Answer 1

这应该工作...

http://jsfiddle.net/it_levon/ew4MP/

<div class='cssmenu'> 
<ul> 
    <li class='active '><a href='index.html'><span>Home</span></a></li> 
    <li><a href='#'><span>Products</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>blue</span></a></li> 
       <li><a href='#'><span>red</span></a></li>    
      </ul>    
     </li> 
     <li><a href='#'><span>Product 2</span></a> 
      <ul> 
      <li><a href='#'><span>green</span></a></li> 
      </ul>    
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li><a href='#'><span>Contact</span></a></li> 
</ul> 
</div>​ 

CSS ...

.cssmenu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    } 
.cssmenu ul{ 
    background:#333333; 
    height:35px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 
.cssmenu li{ 
    float:left; 
    padding:0px; 
    } 
.cssmenu li a{ 
    background:#333333 url('images/seperator.gif') bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-align:center; 
    text-decoration:none; 
    } 
.cssmenu li a:hover, .cssmenu ul li:hover a{ 
    background: #2580a2 url('images/hover.gif') bottom center no-repeat; 
    color:#FFFFFF; 
    text-decoration:none; 
    } 
.cssmenu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:230; 
    /*top:1em;*/ 
    } 

.cssmenu li ul li ul { 
    margin-left:225px; 
    margin-top:-35px;  
} 

.cssmenu li:hover > ul{ 
    display:block; 

    } 
.cssmenu li li { 
    background:url('images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
.cssmenu li:hover li a{ 
    background:none; 

    } 
.cssmenu li ul a{ 
    display:block; 
    height:35px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 

.cssmenu li ul li:hover { 
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
    } 
.cssmenu p { 
    clear:left; 
    } ​​