Question

我的下拉导航仅出现此页面的问题。导航的响应时间非常慢，下拉菜单会在悬停时暂时显示，但会很快消失。我不确定它是否与下面的主要元素有关。如果您有任何见解或帮助，那就太棒了。我是一个图形专业，而不是网络，所以这不是我的专长。

＆＃13;

body{
	background-color: white;
}


#page-wrapper{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: auto;
	background-image: url(Images/brick-wall-2209991.jpg);
	background-repeat: repeat-y;
}

li {
	text-align: center;
	display: inline;
}

a {
    text-decoration: none;
}

.span01,.span02,.span03,.span04,.span05,.span06,.span07,.span08,.span09,.span10,.span11,.span12 
{
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.first-child{
	margin-left: 0;
}

.last-child{
	margin-right: 0;
}

.span01 {
	width: 60px;
}

.span02 {
	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{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden; 
	width: 0px;
}



.header {height: 115px;
		 background-color: #1e241b;
		width: 960px;
}

/********Navigation********/

ul { margin-right: 20px;}

li {text-align: center;
	display: inline;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14pt;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	color: #d98a79;
	
    }
li a:link {color: #d98a79;}

li a:visited {
    color: #d98a79;
}

li a:hover {
	text-decoration-color: white;
	color: white;
	
}

li a:active {
    color: white;
} 

nav {text-align: center;
	padding-left: 110px;
	margin-top: 30px;
	float: right;
	margin-right: 70px;
	}
nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
}

nav ul ul li {
	float: none;
	position: relative;
	text-align: left;
}

nav ul ul li a {
	padding-top: 15px;
	margin-top: 0px;
	padding-bottom: 15px;
	margin-left: -10px;
	margin-right: 15px;
	text-align: left;
	
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	background-color: #1e241b;
	list-style: none;
	position: relative;
	display: inline-table;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	float: left;
}

nav ul li a{
	display: block;
	padding: 10px 8px;
	
}
.bar {height: 190px;
	background-color: rgba(0,0,0,0.75);
	position: relative;
	margin-top: 20px;
}

h1 {
	font-family: 'Josefin Sans', sans-serif;
	text-align: right;
	text-transform: uppercase;
	color: white;
	font-size: 90pt;
	position: relative;
	top:-140px;
	left: -40px;
	margin-bottom: -140px;
}

＆＃13;

<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">
	
	<header class="span12 header first-child last-child">
		
		<nav class="span12">
		
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About Us</a>
					<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="FAQ.html">FAQ</a></li>
					</ul>
				</li>
				<li><a href="#">Menus</a>
					<ul>
						<li><a href="#">Seasonal Menu</a></li>
						<li><a href="#">Breakfast Menu</a></li>
						<li><a href="#">Lunch Menu</a></li>
					</ul>
				</li>
				<li><a href="#">Catering</a></li>  
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Locations</a></li>
		  </ul>
			
		</nav>
    	</header>
<div class="reset"></div>	
	
	<main class="bar span12"></main>
  <h1>About Us</h1>
	
<div class="reset"></div>

＆＃13;

Answer 1

您应该将h1元素放入div容器并使用CSS设置样式。

示例：

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

在css中：

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

Answer 2

嗨试试这个：它会起作用

h1{
clear:both;
}

下拉菜单缓慢响应并在悬停时消失

2 个答案: