下拉菜单响应缓慢，悬停消失
问题描述：
我的下拉导航只有这个页面有问题。导航上的响应时间非常缓慢，下拉菜单会在悬停时立即显示，但很快会消失。我不确定它是否与下面的主要元素有关，或者不是。如果您有任何见解或帮助，那就太好了。我是一个图形专业，而不是网络，所以这不是我的专长。下拉菜单响应缓慢，悬停消失
body{
\t background-color: white;
}
#page-wrapper{
\t margin-left: auto;
\t margin-right: auto;
\t width: 960px;
\t height: auto;
\t background-image: url(Images/brick-wall-2209991.jpg);
\t background-repeat: repeat-y;
}
li {
\t text-align: center;
\t display: inline;
}
a {
text-decoration: none;
}
.span01,.span02,.span03,.span04,.span05,.span06,.span07,.span08,.span09,.span10,.span11,.span12
{
\t display: inline;
\t float: left;
\t margin-left: 10px;
\t margin-right: 10px;
}
.first-child{
\t margin-left: 0;
}
.last-child{
\t margin-right: 0;
}
.span01 {
\t width: 60px;
}
.span02 {
\t width: 140px;
}
.span03 {
width: 220px;
}
.span04 {
width: 300px;
}
.span05 {
width: 380px;
}
.span06 {
width: 460px;
}
.span07 {
width: 540px;
}
.span08 {
width: 620px;
}
.span09 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
.reset{
\t clear: both;
\t display: block;
\t overflow: hidden;
\t visibility: hidden;
\t width: 0px;
}
.header {height: 115px;
\t \t background-color: #1e241b;
\t \t width: 960px;
}
/********Navigation********/
ul { margin-right: 20px;}
li {text-align: center;
\t display: inline;
\t font-family: 'Josefin Sans', sans-serif;
\t font-size: 14pt;
\t text-transform: uppercase;
\t font-weight: bold;
\t letter-spacing: 1px;
\t color: #d98a79;
\t
}
li a:link {color: #d98a79;}
li a:visited {
color: #d98a79;
}
li a:hover {
\t text-decoration-color: white;
\t color: white;
\t
}
li a:active {
color: white;
}
nav {text-align: center;
\t padding-left: 110px;
\t margin-top: 30px;
\t float: right;
\t margin-right: 70px;
\t }
nav ul ul {
\t display: none;
\t position: absolute;
\t top: 100%;
}
nav ul ul li {
\t float: none;
\t position: relative;
\t text-align: left;
}
nav ul ul li a {
\t padding-top: 15px;
\t margin-top: 0px;
\t padding-bottom: 15px;
\t margin-left: -10px;
\t margin-right: 15px;
\t text-align: left;
\t
}
nav ul li:hover > ul {
\t display: block;
}
nav ul {
\t background-color: #1e241b;
\t list-style: none;
\t position: relative;
\t display: inline-table;
}
nav ul:after {
\t content: "";
\t clear: both;
\t display: block;
}
nav ul li {
\t float: left;
}
nav ul li a{
\t display: block;
\t padding: 10px 8px;
\t
}
.bar {height: 190px;
\t background-color: rgba(0,0,0,0.75);
\t position: relative;
\t margin-top: 20px;
}
h1 {
\t font-family: 'Josefin Sans', sans-serif;
\t text-align: right;
\t text-transform: uppercase;
\t color: white;
\t font-size: 90pt;
\t position: relative;
\t top:-140px;
\t left: -40px;
\t margin-bottom: -140px;
}<html>
<head>
<meta charset="UTF-8">
<title>Sous Vide - About</title>
<link href="secondary.css" rel="stylesheet" type="text/css">
<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');
</style>
</head>
<body>
<div id="page-wrapper">
\t
\t <header class="span12 header first-child last-child">
\t \t
\t \t <nav class="span12">
\t \t
\t \t \t <ul>
\t \t \t \t <li><a href="index.html">Home</a></li>
\t \t \t \t <li><a href="about.html">About Us</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="about.html">About Us</a></li>
\t \t \t \t \t \t <li><a href="FAQ.html">FAQ</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Menus</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Seasonal Menu</a></li>
\t \t \t \t \t \t <li><a href="#">Breakfast Menu</a></li>
\t \t \t \t \t \t <li><a href="#">Lunch Menu</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Catering</a></li>
\t \t \t \t <li><a href="#">Gallery</a></li>
\t \t \t \t <li><a href="#">Locations</a></li>
\t \t </ul>
\t \t \t
\t \t </nav>
\t </header>
<div class="reset"></div> \t
\t
\t <main class="bar span12"></main>
<h1>About Us</h1>
\t
<div class="reset"></div>
答
你应该把h1元素的DIV容器中，用CSS样式它。
例子：
<div id="DIVNAME">
<h1>About Us</h1>
</div>
在CSS：
#DIVNAME { height: 100px; width 100px; }
+0
@Hayley Eubank你解决了你的问题吗？ –
答
喜试试这个：它会工作
h1{
clear:both;
}
删除 “关于我们” H1和意志停止发生。使用Chrome调试器，您会看到该元素超过您的菜单。 – Jerinaw
正在处理的任务所需的H1标签。这是标准中的要求。有没有办法重新排列它以阻止它发生？ –
当然，我只是告诉你，这是导致问题的因素。 – Jerinaw