CSS菜单ul ul li下拉菜单不工作即7或6请帮忙

时间:2011-03-21 13:05:41

标签: php html css

我的下拉菜单出现问题,即6/7,它在我网站上的其他div下面落下:

http://www.bankruptcy.co.uk/

我已使用zindex在其他浏览器中修复了它。

任何帮助都将非常感谢。

这是菜单代码。

//我无法发布HTML,因为它中包含太多链接。

这是CSS。

/* JS disabled styles */
nav li:hover ul { display:block; }

/* base nav styles */
nav {
    display:block;
    margin:0;
    position:relative;
    background-color:#1D1AB2;
    border-top-width: 1px;
    border-bottom-width: 3px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #222;
    border-bottom-color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 35px;
}
nav ul {
    padding:0;
    margin:0;
    background-color: #1D1AB2;
}
nav li { position:relative; float:left; list-style-type:none;   z-index: 199;
}
.li80 {
    position:relative;
    float:left;
    width: 80px;
}
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a {
    display:block;
    padding:10px 17px;
    border-left:1px solid #999;
    color:#FFFFFF;
    text-decoration:none;
    font-weight: bold;
}
nav li a:hover {
    color:#036;
    background-color: #FFD073;
}
nav li a:focus { outline:none; text-decoration:underline; }

/* base nav styles */
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#3333cc;
    z-index: 99;
}
nav ul ul li { float:none; }
nav ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:12px;
}

3 个答案:

答案 0 :(得分:1)

你不能在IE 6中的li元素上使用悬停。

下面有一些javascript资源,允许你这样做。这里的链接..在css链接之前包含这个脚本,一切都会好的;)

http://ipkhakadze.com/resources/js/menu.htc

答案 1 :(得分:0)

IE6 / 7中的

CSS :after属性isn't recognized。我担心你需要找到另一个解决方案。

答案 2 :(得分:0)

我看到你已经“悬停在其他元素上”了,所以试试这个

中移除 position: relative
nav li { 
   position:relative; float:left; list-style-type:none;   z-index: 199;
}

并在其下方添加新规则:

nav li:hover {
 position: relative;
}

有帮助吗?