css - 子菜单在 Chrome 中敏感，但在 Firefox 中很好

Question

我才学习网页设计一年。我一直在学习 Lynda.com 的菜单，尤其是在创建子菜单时遇到了问题。

我已经按照自己的意愿制作了子菜单，但是当我在菜单上的列表项之间滑动时，它们切换得太快了。

见下图:

http://s22.postimg.org/699f35hm9/macca_travel.png

如果您查看光标的位置，它仍在“关于”选项卡上，但“博客”悬停已亮起并已被选中。

带有子菜单的两个部分是“博客”选项卡和“照片”选项卡。这两个选项卡不能顺利交叉，我认为这是因为无论出于何种原因，他们选择得太快了。

我不知道为什么:)

这是我的 CSS:

@font-face {
    font-family: 'telegraficoregular';
    src: url('../FONTS/telegrafico-webfont.eot');
    src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
         url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
         url('../FONTS/telegrafico-webfont.woff') format('woff'),
         url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
         url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.cf:after {
  content: "";
  display: table;
  clear: both;
}

html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {

margin: 0;
padding: 0;

}

/*Global Styles*/

html {

background: white;
margin: 0;
padding: 0;

}


body {

width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;

}

h1 {

font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;

}

h2 {

font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;

}

p {

font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}

h4 + p {

font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */

header {

background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;

}

nav {

background: black;
height: 2em;

}

nav ul li {

float: left;


}

nav ul li a {

display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}

li, ul {

position: relative;
margin: 0;
padding: 0;

}

ul.SubMenu {

float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}

ul.SubMenu li{

float: none;

}

ul.SubMenu li a{

display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;

}

li:hover ul {

left: 0;

}

li:hover ul {

left: 0;

}

/* Article Styles */

article {

width: 896px;
padding: 32px;

}


/*Section Styles */


section.China {

text-align: center;
margin: 80px auto;
padding: 20px;

}

section h3 {

font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}

section h4 {

font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;

}

section.China img {

position: relative;
top: 20px;
border-radius: 5px;
}

section.Australia {

text-align: center;
margin: 20px auto;
padding: 20px;

}

section.Australia img {

position: relative;
top: 20px;
border-radius: 5px;
}

section.Thailand {

text-align: center;
margin: 20px auto;
padding: 20px;

}

section.Thailand img {

position: relative;
top: 20px;
border-radius: 5px;
}


/* Link Styles*/

a:hover {

color: orange;
height: 32px;
background: black;

}

ul.SubMenu li a:hover {

background: orange;
color: white;

}

/* About Styles */



#AboutContent{

width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;

}

#AboutHeader {

text-align: center;
margin: 20px auto;
padding: 20px;

}

#AboutHeader img {

display: block;
margin: 0 auto;
text-align: center;

}

#AboutHeader h2 {

font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;

}

h2 + img {

position: relative;
top: 50px;
border-radius: 5px;
}

#AboutHeader p {

font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}

/*Photos Content */

#PhotoContent{

width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;

}

/* Photos Gallery */

#ChinaPhotos {

width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;

}

#ChinaPhotos h3 {

font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;

}

#ChinaPhotos img {

margin-top: 20px;
border: 1px solid black;

}

#ChinaPhotos a .Thumb:hover {

width: 320px;
height: 240px;

}

/* Container Styles */

#Content {

width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;

}


/* Footer Styles */

.Footer {
width: 100%;
height: 160px;
background: black;
}

.Footer p {

font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;

}

谢谢乔

Answer 1

将以下内容添加到您的 CSS 的每个部分:

ul.SubMenu {
    margin-top: 2em;
}

nav ul li a {
    float: left;
}

nav ul li {
    display: block;
}