html - 水平线挡住了子菜单-6ren

html - 水平线挡住了子菜单

转载作者：太空宇宙更新时间：2023-11-04 14:48:27

25

4

我正在组织我的 header.html 但是因为我为下拉菜单插入了代码，作为图像的水平线条挡住了子菜单。有没有办法把蓝色子菜单后面的栏？

header.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />



<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

    <d
</html>

CSS

{
    font-family: verdana,sans-serif; 
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    border-collapse: collapse;
    position: relative;
    min-height: 90%;
    height: auto !important;
    height: 90%;
    margin: 0;
    min-width:800px;
    width: 800px;
}

#left-panel, #right-panel {
        border-collapse: collapse;
        display:inline-block;
        width:30em;
        height:100%;
        margin:0px;
        min-width:100px;
        background:white;
        overflow:hidden;
}
.header {
    margin: 0 auto;
    width: 800px;
    height: auto;
    border-collapse: collapse;
}

.footer, .push  {
    width:800px;
    height: 40px;
    clear: both;
    margin: 0 auto 0;
}

p.copyright {
    font-weight: bold;
    text-align: center;
}

.text-image{
    width:533px;
    height:321px;
    background-image: url('images/about-cti.jpg'); 
    background-position: 350px 250px; 
}

.a {
        text-align: left;
        font-family: verdana;
        font-size: 11pt;
        text-decoration: none; 
        color : #000000;
} 
<!--Navigation-->
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
    list-style:none;
    float:right;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu ul ul {
  display: none;
  position: absolute;

  left: -1px;
  min-width: 100%;
  text-align: center;  
  *width: 100%; /* IE7 hack*/
}
#cssmenu li:hover ul {
  display: block;
}
<!--End of Navigation-->

最佳答案

将此 css 添加到您的水平线:

z-index: -1;
margin-top: 2px;

或者:

z-index: 20;

致您的<ul>

和

margin-top: 2px;

到你的线路

或者:

li, ul {
    z-index: 20;
}

还要注意这个 div 的变化:

<div style="background: url('images/heading-top.jpg') repeat-x; height: 20px; margin-bottom:0; position: relative; top:86px;margin-top: 2px;"></div>

关于html - 水平线挡住了子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17629506/

25

4

0

文章推荐： css - 如何使用CSS媒体查询内联标签？

文章推荐： javascript - 警告栏会消失吗

文章推荐： jquery - 我想将 div 扩展到其隐藏的子 div 的左侧？

iOS 影子被 sibling 的 subview 挡住
我遇到一个问题，我的 View 的阴影被同级 subview 遮挡。这是我的 View 层次结构: ViewController View NavigationView with shado
android - 上下移动 float 操作按钮以避免被 snackbar 挡住
我正在使用 this library实现 float 操作栏，当屏幕上出现 snackbar 时，我似乎找不到移动按钮的方法。那个图书馆甚至有可能吗？最佳答案对于任何在未来寻找答案的人.. Coo

首页

博学

6Ren·AI

商城

html - 水平线挡住了子菜单