开发者社区> 问答> 正文

html菜单问题,求大神解答

杨冬芳 2016-06-21 17:44:52 826

screenshot

怎么才能正常显示

.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'
}
分享到
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:45:09

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

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

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章