通过ul li标签实现二级菜单后添加a标签出现的问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-06-15 18:26:27 2341 1

菜单实现后,弹出、悬浮变色什么的都没有问题
如图:
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环境)

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:40:00

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

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

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56990浏览量 回答数 19

1

回答

ORACLE错误原因查询表ORA-%常见ORA-12514

oracle数据库技术支持www.yunDBA.com 2014-11-12 13:52:58 50091浏览量 回答数 1

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49872浏览量 回答数 43

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146033浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47225浏览量 回答数 15

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305617浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80456浏览量 回答数 13

31

回答

OSS for PHPWIND 8.7 [20121127更新]

enj0y 2012-09-10 15:48:13 55423浏览量 回答数 31

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47412浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48725浏览量 回答数 3
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载