两层ul中display怎么设计都无法出现效果

Question

CSS部分

#div2

{

  float:left;

  padding:0px;

  width:180px;

 }

 #div2 ul

 {

    list-style-type:none; 

    margin:0px;

 }

 #div2 ul li

 {

    margin:0px;

    width: 180px;

 background-color:Gray;

}

#div2 ul li:link

{

  text-decoration:none;

}

#div2 ul li ul

{

   width:180px;  

   display:block; 

 }

 #div2 ul li ul li

 {

    width:180px;    

 }

 #div2 ul li ul li :hover

 {

     width:180px;

    background-color:White;

    color:Red;    

 }

asp.net前台部分

<div id="div2" >

        <ul>

           <li ><a href="#">鞋子</a>

              <ul>

                <li><a href="#">高跟鞋</a></li>

                <li><a href="#">皮鞋</a></li>

                <li><a href="#">拖鞋</a></li>

                <li><a href="#">雪地靴</a></li>

            </ul>

           </li>

           <li><a href="#">上衣</a>

               <ul>

                <li><a href="#">T恤</a></li>

                <li><a href="#">棉衣</a></li>

                <li><a href="#">夹克</a></li>

              </ul>

           </li>

         

        </ul>

       

      </div>

实现效果

这是网页打开二级导航就直接显示，我想要的效果的是鼠标放到一级导航才出现二级导航

Answer 1

这个最好用js控制一下

Answer 2

你用Hover 控制下一级的display

Answer 3

应该是不同浏览器的兼容问题吧，我copy你的源码在谷歌打开是可以实现你要的效果的

Answer 4

最简单就是换个标签