2017-11-17 4 views
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>

+0

는 H1과 그 뜻을 "소개"를 삭제 작동합니다 일어나는 것을 멈추십시오. 해당 요소가 메뉴를 뒤덮는 것을 볼 수있는 Chrome 디버거를 사용합니다. – Jerinaw

+0

내가 맡고있는 과제에 필요한 H1 태그. 루 브릭에서 필요합니다. 그 일을 막기 위해 재 배열 할 수있는 방법이 있습니까? –

+0

물론, 문제를 일으키는 것이 바로 그 요소라는 것을 보여 드리고자합니다. – Jerinaw

답변

0

당신은 사업부 컨테이너와 CSS와 스타일을에 H1 요소를 넣어해야합니다.

예 :는 CSS에서

<div id="DIVNAME"> 
    <h1>About Us</h1> 
</div> 

:

#DIVNAME { height: 100px; width 100px; } 
+0

@Hayley Eubank 문제를 해결 했습니까? –

0

안녕이 시도 : 그것은

h1{ 
clear:both; 
}