为了账号安全,请及时绑定邮箱和手机立即绑定

怎么让鼠标放在22222的时候里面的123456不显示。然后把鼠标放到88888的时候显示123456。求大神解答。谢谢~

怎么让鼠标放在22222的时候里面的123456不显示。然后把鼠标放到88888的时候显示123456。求大神解答。谢谢~

小黄金 2015-07-22 15:10:51
<style>*{margin:0;padding:0;}#toubu{    background:#3d1;    height:50px;    width:1100px;    margin:0 auto;}.nav, .nav ul{    list-style:none;    height:50px;    line-height:50px;    background:#red;}.nav>li{    float:left;}.nav a{    display:block;    text-decoration:none;    color:#000;    padding:0 20px;}.nav a:hover,.nav li:hover ul{    color:#fff;    background:#999;    display:block;}.nav li ul{    display:none;    background:#red;}.nav li ul li {    position:relative;    background:#red;}.nav li ul li ul{    position:absolute;    left:105px;    top:0;    }</style><div id="toubu">    <ul class="nav">        <li><a href="#">1111111</a></li>        <li><a href="#">2222222</a>            <ul>                <li><a href="#">7777777</a></li>                <li><a href="#">8888888</a>                    <ul>                        <li><a href=“#”>123456</a></li>                        <li><a href="#">123456</a></li>                    </ul>                </li>                <li><a href="#">9999999</a></li>            </ul>        </li>        <li><a href="#">3333333</a></li>        <li><a href="#">4444444</a></li>        <li><a href="#">5555555</a></li>        <li><a href="#">6666666</a></li>    </ul></div>
查看完整描述

2 回答

已采纳
?
子木李

TA贡献46条经验 获得超27个赞

添加这两样css

.nav li:hover ul li ul{
    display: none;
}

.nav li ul li:hover ul{
    display: block;
}

另外,建议把

.nav li ul li ul{
    position:absolute;
    left:105px;
    top:0;    
}

left:105px改为95px,要不然的话ul和li之间有空隙,鼠标划不到ul上就消失了

查看完整回答
反对 回复 2015-07-22
  • 小黄金
    小黄金
    非常感谢!
  • 小黄金
    小黄金
    这个是浏览器的兼容性问题。在火狐上没问题的,ie和google都不行,要怎么解决?
  • 小黄金
    小黄金
    .nav li{ float:left; text-align: center; width: 105px; } .nav li ul li { position:relative; background:#f00; width: 105px; } 设置li的宽度就可以了。嘿嘿。可以帮我看看这代码还可以简化吗?
点击展开后面1
?
huangjunm

TA贡献1条经验 获得超0个赞

333

查看完整回答
反对 回复 2016-07-13
  • 2 回答
  • 0 关注
  • 1356 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信