0
出於某種原因，我無法在導航欄上水平應用漸變。它使元素消失，但是當我將它應用到li時它就沒有問題。這是怎麼回事？您可以在http://jcdevelopmentsite.com/spaoftheearth/index-spa.html導航中的漸變，而不是li
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;
}
原因漸變不顯示當你把它在'
完美，謝謝！ – user2287917 2015-04-01 00:57:36