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