开发者社区> 问答> 正文

通过ul li标签实现二级菜单后添加a标签出现的问题

菜单实现后,弹出、悬浮变色什么的都没有问题
如图:
screenshot
screenshot

<ul class="nav_ul">
                        <li>
                            News
                            <ul class="nav_ul_sub">
                                <li><a target="_self" href="article.html">New&nbsp;&nbsp;Zealand</a></li>
                                <li><a target="_self" href="article.html">Australia</a></li>
                                <li><a target="_self" href="article.html">Britain</a></li>
                                <li><a target="_self" href="article.html">France</a></li>
                            </ul>
                        </li>


css代码:

.nav_ul,.nav_ul li{
    height: 30px;
    display: inline-block;
}
.nav_ul li{
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    font-weight:  bolder;
    font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei','museo_slab' 'tohoma,sans-serif';
    color: white;
    position: relative; /*子菜单出现位置基准*/
}
.nav_ul li:hover{
    background:#000000;
}
.nav_ul_sub{
    display: none;
    position: absolute;
    top: 29px;
    left: 0;
    background: #2F3237;
}
.nav_ul_sub li{
    height: 30px;
    width: 100%;
    display: block;
    background:#000000;
    border-top: 1px solid  #2F3237;
}
.nav_ul_sub a{
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-weight:  bolder;
    font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei','museo_slab' 'tohoma,sans-serif';
    color: white;
}
.nav_ul_sub a:hover{
    text-decoration: none;
}
.nav_ul_sub a:active{
    text-decoration: none;
}
.nav_ul_sub a:visited{
    text-decoration: none;
}
.nav_ul_sub li:hover{
    background:#2F3237;
}

更具体代码在上面两个地址都有

请问产生这种情况的原因是什么?如何修改?

(chrome环境)

展开
收起
杨冬芳 2016-06-15 18:26:27 3074 0
1 条回答
写回答
取消 提交回答
  • IT从业

    我给你看四张截图,跟你指出问题出在哪儿,但是解决方法希望你能自己去找:

    第一组两张:第一张鼠标移入主菜单,展开二级菜单,但是鼠标不进入二级菜单项;第二张则是移出让二级菜单消失。你注意一下,子菜单 ul 的属性变化。
    screenshot
    screenshot
    第二组:在上一组的基础上这一次我把鼠标移入二级菜单的某一项,然后再移出去,注意对比一下高亮元素(也就是子项的 a)的属性变化。
    screenshot
    screenshot

    2019-07-17 19:40:00
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载