Question

鼠标悬停在鼠标悬停按钮上时，导航悬停按钮未完全着色。我已经尝试将宽度改为100％，我认为会修复它，但事实并非如此。我试图寻找一些类似的问题和解决方案，但是我发现的所有解决方案都没有解决问题，所以我决定亲自问一下。想法？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Sunny Acres</title>
        <script src="modernizr-1.5.js"></script>
        <link href="sa_layout.css" rel="stylesheet" type="text/css" />
        <link href="sa_styles.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            section > p:first-of-type:first-line {
                text-transform: uppercase;
            }
            section > p:first-of-type:first-letter {
                font-size:250% font-family:'Times New Roman', Times, serif;
            }
        </style>
    </head>

    <body>
        <header>
             <h1>
                <img src="salogo.png" alt="Sunny Acres" />
             </h1>
        </header>
        <nav>
            <ul>
                <li><a href="home.htm">Home</a>
                </li>
                <li><a href="maze.htm">Autumn Fun</a>
                </li>
                <li><a href="haunted.htm">Scary Good</a>
                </li>
                <li><a href="petting.htm">Meet the Animals</a>
                </li>
                <li><a href="produce.htm">For your Tastebuds</a>
                </li>
            </ul>
        </nav>
        <section>
            <header>
                 <h1>Welcome</h1>
            </header>
            <img src="photo1.jpg" alt="home page photo" id="promoimage" />
            <p id="firstp">There's always something happening at Sunny Acres. With the coming of fall, we're gearing up for our big AutumnFest and Farm Show. If you haven't visited our famous <a href="maze.htm">Corn Maze</a>, be sure to do so before it gets torn down on November 5. This year's maze is bigger and better than ever.</p>
            <p>Farms can be educational and Sunny Acres is no exception. Schools and home-schooling parents, spend an afternoon with us at our <a href="petting.htm">Petting Barn</a>. We have over 100 friendly farm animals in a clean environment. Kids can bottle feed the baby goats, lambs, and calves while they learn about nature and the farming life. Please call ahead for large school groups.</p>
            <p>When the sun goes down this time of year, we're all looking for a good fright. Sunny Acres provides that too with another year of the <a href="haunted.htm">Haunted Maze</a>. Please plan on joining us during weekends in October or on Halloween for our big Halloween Festival.</p>
            <p>Of course, Sunny Acres is, above all, a <em>farm</em>. Our <a href="produce.htm">Farm Shop</a> is always open with reasonable prices on great produce. Save even more money by picking your own fruits and vegetables from our orchards and gardens.</p>
            <p class="closing">We all hope to see you soon, down on the farm.
                <br />&mdash; Tammy &amp; Brent Nielsen</p>
             <h2>Hours</h2>

            <ul>
                <li>Farm Shop: 9 am - 5 pm Mon - Fri; 9 am - 3 pm Sat</li>
                <li>The Corn Maze: 11 am - 9 pm Sat; 11 am - 5 pm Sun</li>
                <li>The Haunted Maze: 5 pm - 9 pm Fri &amp; Sat</li>
                <li>Petting Barn: 9 am - 4 pm Mon - Fri; 11 am - 3 pm Sat &amp; Sun</li>
            </ul>
             <h2>Directions</h2>

            <ul>
                <li>From Council Bluffs, proceed east on I-80</li>
                <li>Take Exit 38 North to the Drake Frontage Road</li>
                <li>Turn right on Highway G</li>
                <li>Proceed east for 2.5 miles</li>
                <li>Sunny Acres is on your left; watch for the green sign</li>
            </ul>
        </section>
        <footer> <address>
                Sunny Acres &nbsp;&#9728;&nbsp;
                Tammy &amp; Brent Nielsen &nbsp;&#9728;&nbsp;
                1977 Highway G &nbsp;&#9728;&nbsp;
                Council Bluffs, IA &nbsp;&nbsp; 51503
            </address>
        </footer>
    </body>

</html>

CSS：

@font-face {
    font-family: 'NobileRegular';
    src: url('nobile-webfont.eot');
    src: local('☺'),
        url('nobile-webfont.woff') format('woff'),
        url('nobile-webfont.ttf') format('truetype'),
        url('nobile-webfont.svg#webfontsKo9tqe9') format('svg');
}

/* body styles */
body {
    background-color: white;
    font-family: NobileRegular, Verdana, Geneva, sans-serif;
    line-height: 1.4em;
}

/*heading styles */
section h1 {
    background-color: rgb(125, 186, 240);
    color: white;
    font-size: 1.7em;
    letter-spacing: 0.4em;
    text-indent: 1em;
    line-height: 1.8em;
}
h2{
    background-color: rgb(0,154,0);
    color: white;
    color : rgba(255, 255, 255, 0.8);
    letter-spacing: 0.4em;
    text-indent: 1em;
    line-height: 1.8em;
}

/* navigation styles */
nav ul {
    list-style-type: none;
    padding-left: 0.5em;
    background-color: rgb(125,186,240);
    line-height: 3.5em;
    width:none;
    float:none;
}
nav ul li a {
    color: white;
    text-decoration: none;
    width:100%;
    float:none;
}
nav ul  li:hover {
    background-color: rgb(83,142,213);
    width:none;
    float:none;
}
/*nav ul li:first-of-type {
text-transform: uppercase; 

}
*/

/* section styles */
section p.closing {
    color: rgb(0,165,0);
    text-align: right;
}
section h2+ul {
    list-style-image: url(arrow.png);
}

/* footer styles */
footer address { 
    background-color: rgb(55,102,55);
    color: white;
    color: rgba(255,255,255,0.8);
    font: normal small-caps 0.8em/4em 'Times New Roman', Times, serif;
    text-align: center;
}

Answer 1

从<ul>移除填充并将其添加到<li> here is the fiddle

Answer 2

更改这两种样式，您将获得所需的输出。

/ *导航样式* /

nav ul {
    list-style-type: none;
    padding-left: 0.5em;
    background-color: rgb(125,186,240);
    line-height: 3.5em;
    PADDING-LEFT:0;
    width:none;
    float:NONE;
    }


nav ul li a {
    color: white;
    text-decoration: none;
    PADDING-LEFT:10PX;
    width:100%;
    float:none;
    }

导航悬停按钮没有完全着色？

2 个答案: