Question

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

Answer 1

它似乎是一个用css上的元素设置的位置问题。查看你的html和css代码会有所帮助。

Answer 2

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

Answer 3

我检查了这个页面，发现很多东西没能很好地用于导航。良好的家务管理不合适。

#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;
}

您可能想要清除nav css并从头开始。我拉了一个css文件并把它放在下面。希望这可以帮助。祝你的sytle床单在未来好运。

#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 */

仅当滚动页面时，间隙才会显示在下拉导航中

3 个答案: