出于某种原因，我在导航栏上水平应用渐变时遇到了问题。它使元素消失，但是当我将它应用于li时它是可以的。发生了什么事？您可以在http://jcdevelopmentsite.com/spaoftheearth/index-spa.html
查看该网站HTML
<!DOCTYPE html>
<html lang='en-us'>
<html>
<head>
<meta charset='utf-8'/>
<title>Homepage | Spa of the Earth</title>
<link rel='icon' type='image/png' href='images/favicon.png'/>
<meta name='keywords' content='Spa of the earth, spa, massage, facial, treatment, mud, organic, natural'>
<meta name='description' content='Luscious spa services including facials, body wraps, etc'>
<link rel='stylesheet' type='text/css' href='styles.css'>
<link rel='stylesheet' type='text/css' href='styles-home.css'>
<script src='jquery-awesomeness.js'></script>
<!-- Slider Link -->
<script src='responsiveslides.min.js'></script>
<!-- Social Media Plugins from sharethis.com -->
<script type='text/javascript'>var switchTo5x=true;</script>
<script type='text/javascript' src='http://w.sharethis.com/button/buttons.js'></script>
<script type='text/javascript' src='http://s.sharethis.com/loader.js'></script>
<script>
// Slider Functions
$(function() {
$('.rslides').responsiveSlides({
speed: 750,
timeout: 3000
});
});
</script>
</head>
<body>
<!-- header -->
<header id='home'>
<img id='header-logo' src='images/header-logo.jpg' alt='Logo: Spa of the Earth'>
</header>
<!-- nav -->
<nav role='navigation'>
<ul id='menu'>
<li><a href='index-spa.html'>Home</a>
<ul>
<li><a href='#specials'>Specials</a></li>
</ul>
</li>
<li><a href='appointments.html'>Appointments</a>
<ul class='submenu'>
<li><a href='#facials'>Facials</a></li>
<li><a href='#body'>Body</a></li>
<li><a href='#oncology'>Oncology</a></li>
<li><a href='#ayurveda'>Ayurveda</a></li>
<li><a href='#energy'>Energy Work</a></li>
<li><a href='#divination'>Divination</a></li>
</ul>
</li>
<li><a href='events.html'>Events</a>
<ul class='submenu'>
<li><a href='#reiki'>Reiki</a></li>
<li><a href='#evens'>Special Events</a></li>
</ul>
</li>
<li><a href='about.html'>About Us</a>
<ul class='submenu'>
<li>
<a href='http://jcdevelopmentsite.com/spaoftheearth/about.html#wiesje'>Wiesje Brion</a>
</li>
<li><a href='#media'>Media</a></li>
<li><a href='#testimonials'>Testimonials</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</li>
<li><a href='help.html'>Help</a>
<ul class='submenu'>
<li><a href='#policies'>Policies</a></li>
<li><a href='#privacy'>Privacy Notice</a></li>
<li><a href='#faq'>FAQ</a></li>
</ul>
</li>
<li><a href='blog.html'>Blog</a>
<ul class='submenu'>
<li><a href='#homebeauty'>Home Beauty</a></li>
<li><a href='#astrology'>Astrology</a></li>
</ul>
</li>
</ul>
</nav>
<!-- #welcome -->
<section id='welcome'>
<div id='slider'>
<ul class='rslides'>
<li><img src='images/slide1.jpg'></li>
<li><img src='images/slide2.jpg'></li>
<li><img src='images/slide3.jpg'></li>
<li><img src='images/slide4.jpg'></li>
</ul>
<img id='frame' src='images/sliderframe.png'>
</div>
<div class='content'>
<h2>Treat Yourself to a Natural, Soul Pleasing Experience!</h2>
<p>At Spa of the Earth, we specialize in naturopathic healing inspired by ancient Ayurvedic principles. We tailor our holistic treatments to your dosha type, targeting your spirit amd individuality. Restore, rejuvenate and balance with the best wild-crafted botanical treatments available, hand-made by Spa of the Earth.
</p>
<br>
<p>Schedule an appointment today for an extraordinary experience in beauty, skin care and wellness.
</p>
</div> <!-- Closes #content -->
</section>
<!-- Social Media Plugin from sharethis.com -->
<script type='text/javascript'>stLight.options({publisher: '69520918-4da3-4dbc-aa1c-ceb74de78ee9', doNotHash: false, doNotCopy: false, hashAddressBar: false});
</script>
<script>
var options={ 'publisher': '69520918-4da3-4dbc-aa1c-ceb74de78ee9', 'position': 'right', 'ad': { 'visible': false, 'openDelay': 5, 'closeDelay': 0}, 'chicklets': { 'items': ['facebook', 'twitter']}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
<!-- Closes Social Media Plugin -->
<!-- jQuery for Dropdown Menu -->
<script>
var timer;
$('.parent').on('mouseover', function() {
clearTimeout(timer);
openSubmenu();
}).on('mouseleave', function() {
timer = setTimeout(
closeSubmenu
, 1000);
});
function openSubmenu() {
$('.submenu').addClass('open');
}
function closeSubmenu() {
$('.submenu').removeClass('open');
}
</script>
</body>
</html>
CSS
/* ========================= Primary CSS Styles for Spa of the Earth ========================= */
/* ============================== Basic Reset ============================== */
* {
margin: 0;
padding: 0;
font-family: 'champagne__limousinesregular';
color: #7A7A7A;
}
/* ============================== Begin CSS Styles ============================== */
/* ============================== Web Font Kits ============================== */
@font-face {
font-family: 'bebasregular';
src: url('fonts/bebas/bebas___-webfont.eot');
src: url('fonts/bebas/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bebas/bebas___-webfont.woff') format('woff'),
url('fonts/bebas/bebas___-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'champagne__limousinesregular';
src: url('fonts/champagne/champagne__limousines-webfont.eot');
src: url('fonts/champagne/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/champagne/champagne__limousines-webfont.woff') format('woff'),
url('fonts/champagne/champagne__limousines-webfont.ttf') format('truetype'),
url('fonts/champagne/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'chopinscriptmedium';
src: url('fonts/chopin/chopinscript-webfont.eot');
src: url('fonts/chopin/chopinscript-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/chopin/chopinscript-webfont.woff2') format('woff2'),
url('fonts/chopin/chopinscript-webfont.woff') format('woff'),
url('fonts/chopin/chopinscript-webfont.ttf') format('truetype'),
url('fonts/chopin/chopinscript-webfont.svg#chopinscriptmedium') format('svg');
font-weight: normal;
font-style: normal;
}
/* ============================== Structural Styles ============================== */
header {
width: 100%;
}
/* ============================== Nav Styles ============================== */
nav {
display: block;
font-family: 'champagne__limousinesregular';
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
width: 14.666%;
padding: 1%;
background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* Standard syntax */
display: block;
float: left;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
nav li a {
color: #ffffff;
text-decoration: none;
display: block;
}
nav li:hover {
@include transition(background, 0.2s);
cursor: pointer;
}
nav ul li ul {
width: 95%;
padding-top: 5%;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
left: 0;
z-index: 999;
}
nav ul li:hover > ul, nav ul li ul:hover {
visibility: visible;
}
nav ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
nav ul li ul li:hover {
background: #aaaaaa;
}
/* ============================== Submenu Styles ============================== */
/* ============================== Main Content ============================== */
.content {
width: 90%;
padding: 0 5%;
font-family: 'Arial';
font-size: 1em;
line-height: 2em;
letter-spacing: .2em;
}
/* ============================== Typographic Styles ============================== */
h2 {
margin-bottom: 3%;
font-size: 'chopinscriptmedium';
font-size: 1.75em;
text-align: right;
letter-spacing: .1em;
color: #009b9c;
}
p {
font-size: 1.2em;
}
答案 0 :(得分：0)
试试这个
display: inline-block; width: 100%; nav {
display: inline-block;
background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* Standard syntax */
font-family: 'champagne__limousinesregular';
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
width: 14.666%;
padding: 1%;
display: block;
float: left;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
nav li a {
color: #ffffff;
text-decoration: none;
display: block;
}
nav li:hover {
@include transition(background, 0.2s);
cursor: pointer;
}
nav ul li ul {
width: 95%;
margin-top: 5%;
padding-top: 5%;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
left: 0;
z-index: 999;
background: -webkit-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, #aa893c, #806720, #e9d07c, #806720); /* Standard syntax */
}
nav ul li:hover > ul, nav ul li ul:hover {
visibility: visible;
}
nav ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
nav ul li ul li:hover {
background: #aaaaaa;
}
/* ============================== Submenu Styles ============================== */