1
我的下拉導航只有這個頁面有問題。導航上的響應時間非常緩慢，下拉菜單會在懸停時立即顯示，但很快會消失。我不確定它是否與下面的主要元素有關，或者不是。如果您有任何見解或幫助，那就太好了。我是一個圖形專業，而不是網絡，所以這不是我的專長。下拉菜單響應緩慢，懸停消失
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和意志停止發生。使用Chrome調試器，您會看到該元素超過您的菜單。 – Jerinaw
正在處理的任務所需的H1標籤。這是標準中的要求。有沒有辦法重新排列它以阻止它發生？ –
當然，我只是告訴你，這是導致問題的因素。 – Jerinaw