html - 整个导航的渐变，而不是 li-6ren

html - 整个导航的渐变，而不是 li

转载作者：行者123 更新时间：2023-11-28 08:08:40

出于某种原因，我无法在导航栏上水平应用渐变。它使元素消失，但是当我将它应用于 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;
    }

最佳答案

试试这个

导航栏 display: inline-block;
导航栏 宽度:100%;
并向子菜单项添加渐变(nav>li>ul) 并从菜单中删除元素(导航> li)

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              ============================== */

关于html - 整个导航的渐变，而不是 li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29380925/

文章推荐： c++ - 允许在窗口内设置单个像素的库

文章推荐： ios - onFormat string For NSPredicate

文章推荐： c++ - QWidget::insertAction 尝试在运行时插入空操作

文章推荐： objective-c - 在谷歌分析 API 中获取文章的创建日期

jQuery - 将主体背景(css 渐变)淡入另一个 CSS 渐变
我使用 jQuery 已经有一段时间了，但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
java - 渐变 + 想法 : can not resolve systemProperty in build. 渐变
为了使用 jni 帮助程序库运行测试，我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
渐变 wsimport
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类，如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
gradle - 在构建过程中将使用的第三方组件的位置(渐变)
我们有一个重复使用第3方 war 的项目(如果有人要求，则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中，当前的ant任务将其解压缩到temp文件夹中，进
python - 在python中的蒙版外的图像上添加模糊/渐变
我有一个边界框，其坐标由(x，y，w，h)给出，其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版，并使用类似于下图的PIL或cv2在蒙版之外应用此效果？最佳答案
javascript - 动态改变元素背景(渐变)
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。但是卡片的背景应该根据线条的渐变颜色而变化。 background:
javascript - 渐变/不透明度解决方法
我现在有这种情况:JSFIDDLE 我想实现这种效果，但我希望文本可以在渐变后面选择，并且即使我将鼠标放在文本上也可以滚动文本。是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
html - CSS如何实现多重背景+渐变？
这段代码是我从css graident generator得到的，渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
两部分图像上的 CSS 渐变
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
渐变内的 CSS 渐变
是否可以使用渐变作为渐变中的一种颜色？为了我的特定目的，我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
CSS 背景过渡 - 渐变
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
html - 元素顶部和底部的阴影/渐变
我一直在寻找像下图中那样的多组件日期选择器，但在 Github 或其他地方找不到任何东西。所以我决定做一个。我在实现 CSS 时遇到问题，它在顶部和底部淡出。我想过在容器中使用:before和:a
具有多个停止点和边框的 CSS 渐变
我正在寻找与下图等效的 css。我正在使用多个停止点，但很难获得硬停止点 solid 2px white 边框。如果我添加它，它看起来像是一个渐变而不是硬边。任何帮助都会很棒，谢谢! .stripes
图片的 CSS 渐变
我的广告部门给了我一些图像，将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而，经过几次试验，我无法接近以下图像。对于这两张图片，我将不胜感激。请删除这个
html - 在悬停其他元素时更改主体背景图像/渐变
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变，我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
css - 渐变 - 跨浏览器一致性
我正在测试所有浏览器的渐变兼容性，我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。代码 body{
内容很少的 CSS 渐变
当我使用渐变时，当内容很少时，渐变会重复出现，我该如何防止这种情况发生？ http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; }，但是当
html - 将导航栏颜色混合到背景颜色(渐变？)
我有一个导航栏，它的背景颜色略深。我想要一个从中心到左右两侧的渐变，以便导航栏最右边和最左边的位达到背景颜色。这可能吗？ -->
适用于多种浏览器的 CSS3 渐变
我在 Firefox 中使用了这个 CSS 线性渐变，但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素，这种风格似乎只适用于 F
css - 渐变:半色半透明
我有这行代码背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见，它一半是灰色一半是黑色。有没有办法让它的灰

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 整个导航的渐变，而不是 li