0

我最近建立了我的第一个网站（经过多次试验和错误）并且非常高兴，直到我注意到当您向下滚动页面时它会在导航中产生一个间隙，因此您无法单击下拉菜单。我要疯了，试图修复它。有人可以帮忙吗？该网站位于： http: //lamplighters.org/education/smw.html

4

3 回答 3

0

我可以告诉你，这与你使用的事实有关position: fixed。您的 CSS 还存在一系列其他问题。

于 2013-07-09T22:10:56.120 回答
0

我检查了该页面，发现很多东西在导航方面并没有很好地结合在一起。良好的家政服务是不按顺序的。

#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}

#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}

您可能希望清除导航 CSS 并从头开始。我拉了一个css文件并将其放在下面。希望这可以帮助。祝您未来的样式表好运。

#menu{
    width: 960px;
    margin: 50px 0 0 0;
    padding: 10px 0 0 0;
    list-style: none;
}

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding: 0 60px;
    text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
    color: #FFFFFF;
}

*html #menu li a:hover{ /* IE6 */
    color: #FFFFFF;
}

#menu li:hover > ul{
    display: block;
}



/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0 35px;
    padding: 0 15px;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */   
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
    /*add a background position*/
    background-position: left top;
}

#menu ul li:first-child a{
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
}

#menu ul li:first-child a:hover:after{
    /*add color scheme*/
}

#menu ul li:last-child a{
}



/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
于 2013-07-09T22:16:37.033 回答
0

这似乎是一个位置问题，由 CSS 上的元素设置。这将有助于查看您的 html 和 css 代码。

于 2013-07-09T21:39:38.000 回答