首页 > 开发 > JS > 正文

html菜单问题,求大神解答

2017-09-05 12:49:46  来源:网友分享

怎么才能正常显示

.nav{    width: 100%;    height: 45px;    background-color: #449FE6;}.menu {     width:1170px;     height:45px;     background-color:#449FE6;     margin:0 auto;}.menu ul li{float:left;width:105px;height:45px;color:#FFFFFF;margin-left:12px;text-align:center;line-height:45px;}.menu a {    display: block;     padding-left:15px;     color: #fff; }.menu a:hover {    display:block;    width:85px;    height:45px;    background-color:#013C76;}div.menu-list { border-right:#d6d6d6 1px solid;  padding-right:0px; border-top:#d6d6d6 1px solid;     display:none; padding-left:0px;    filter:alpha(opacity=80);     padding-bottom: 5px; border-left:#d6d6d6 1px solid;     width:100px;     padding:0px;     background-color:#013C76;    color:#FFFFFF;    border-bottom:#d6d6d6 1px solid;     position: absolute;     opacity: 0.8;}div.menu-list ul {    padding-right: 0px;     padding-left: 0px;     padding-bottom: 0px;     margin: 0px;     padding-top: 0px;}div.menu-list ul li {    padding-right: 0px;     padding-left: 0px;     padding-bottom: 0px;     margin: 0px;     padding-top: 0px;}div.menu-list ul li {margin-left:2px;margin-top:5px;font-size:12px;text-align:center;line-height:24px;list-style-type: circle;}div.menu-list ul li a {    display: block;     width: 100%;  cursor:pointer;     color: #FFFFFF;     line-height: 25px;     height: 25px;     text-align: center;     text-decoration: none;}div.menu-list ul li a span {    display: block;     width: 100%;     height: 100%}div.menu-list ul li a:hover {    display:block;    width:90px;    height:24px;    background:#449FE6;    font-size:12px;    text-align:center;    line-height:24px;    margin-left:2px;    margin-top:5px;}`<div class=menu><ul>   <li class=select><a href="">首页</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onmouseover="mouseover(this, 1)" onmouseout=mouseout()><a href="">机构介绍</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 2)" onmouseout=mouseout()><a href="">产品检测</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 3)" onmouseout=mouseout()><a href="">技术服务</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 4)" onmouseout=mouseout()><a href="">质量鉴定</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 5)" onmouseout=mouseout()><a href="">科研标准</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 6)" onmouseout=mouseout()><a href="">新闻咨询</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 7)" onmouseout=mouseout()><a href="">专题专栏</a></li>   <li style="width:2px;padding-top:8px;"><img src="images/b.png" /></li>   <li onMouseOver="mouseover(this, 8)" onmouseout=mouseout()><a href="">联系我们</a></li>   </ul></div><div class=menu-list id=menu1 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a></li></ul></div>  <div class=menu-list id=menu2 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a></li></ul></div>  <div class=menu-list id=menu3 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href=""><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   </li></ul></div>  <div class=menu-list id=menu4 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   </li></ul></div>  <div class=menu-list id=menu5 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   </li></ul></div><div class=menu-list id=menu6 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   </li></ul></div><div class=menu-list id=menu7 onmouseover=_mouseover() onmouseout=_mouseout()><ul>  <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   <li><a href="#"><span>二级菜单栏目</span></a>   </li></ul></div>`
function getOffsetTop (el, p) {    var _t = el.offsetTop;    while (el = el.offsetParent) {        if (el == p) break;        _t += el.offsetTop;    }    return _t;};function getOffsetLeft (el, p) {    var _l = el.offsetLeft;    while (el = el.offsetParent) {        if (el == p) break;        _l += el.offsetLeft;    }    return _l;};var tt;var curMenu;function mouseover (th, menu) {    if (tt) clearTimeout(tt);    displayMenu(false);    menu = document.getElementById('menu' + menu);    menu.style.left = getOffsetLeft(th) + 'px';    menu.style.top = getOffsetTop(th) + th.offsetHeight + 'px';    curMenu = menu;    displayMenu(true);}function mouseout () {    tt = setTimeout('displayMenu(false)', 200);}function _mouseover () {    if (tt) clearTimeout(tt);    displayMenu(true);}function _mouseout () {    displayMenu(false);}function displayMenu (display) {    if (curMenu) {        curMenu.style.display = display ? 'block' : 'none';    }}function doZoom(size){    document.getElementById('textbody').style.fontSize=size+'px'}

解决方案

不止是头部的问题啊,只给头部这段代码的话

给你二级菜单设置z-index:99999试试