Question

首先，这是指向my code的链接。希望我做对了。我想让盒子做类似于这张图片的内容：

当我将鼠标悬停在导航栏中的任何选项上时，我想：

整个方块的颜色变为灰色
下拉列表中每个选项后的间距是正确的（我没有把它们彼此隔开）
在方块变灰后留在黑条内

为了节省您的点击次数，这里是我的导航栏的CSS。

#nav_bar ul {
    list-style: none;
    padding: .5em 0.5em;
    background-color: black;
}
#nav_bar li {
    display: inline;
    position: relative;
    text-align: center;
}
#nav_bar a {
    padding: 1em 1.5em;
    text-decoration: none;
    color: white;
}
#nav_bar a.current {
    color: orange;
}
#nav_bar ul ul {
    display: none;
}
#nav_bar ul li {
    padding: .5em;
}
#nav_bar li:hover ul {
    display: block;
    position: absolute;
    left: 0%;
    top: 100%;
    padding: .5em;
}
#nav_bar ul:hover a:hover {
    background-color: gray;
}
#nav_bar ul ul:hover a:hover {
    background-color: gray;
}

完整的HTML将在上面的链接中。任何帮助将不胜感激。

Answer 1

要在选项之间保留空格，请在CSS中使用此代码

#nav_bar ul ul li a{
    display:block;
    padding : 0em 3.2em;
}

我也是这样在你的代码中。当悬停主导航栏时，它会增加大小。如果你不想修复它使用下面的代码。此代码更改了列表项

的填充中的一些属性

#nav_bar a {
    padding: 0.5em 1em;
    text-decoration: none;
    color: white;

}

Answer 2

我已经对html的代码和结构做了一些更改。请检查以下HTML和CSS代码

以下HTML代码： -

<body>
    <header>
        <img src="images/pumpkin.gif" alt="Pumpkin" width="85">
        <h2>The Halloween Store</h2>
        <h3>For the little Goblin in all of us!</h3>
    </header>
    <section>
        <nav id="nav_bar">
            <ul>
                <li id="home"><a href="index.html" class="current">Home</a>
                </li>
                <li id="products"><a href="">Product List</a>
                </li>
                <li id="personal"><a href="">Personal</a>
                </li>

                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Decorating Items</a>
                    <div class="dropdown-content">
                        <a href="#">Outdoor</a>
                        <a href="#">Indoor</a>
                        <a href="#">TableTreats</a>
                    </div>
                </li>


                <li id="email"><a href="">Join Email</a>
                </li>
            </ul>
        </nav>
        <table>
            <tr>
                <td style="text-align:left;vertical-align:top;width=160px;">
                    <nav id="nav_list">
                        <ul>
                            <li><a href="products/props.html">Props</a>
                            </li>
                            <li><a href="products/costumes.html">Costumes</a>
                            </li>
                            <li><a href="products/special.html">Special FX</a>
                            </li>
                            <li><a href="products/masks.html">Masks</a>
                            </li>
                        </ul>
                    </nav>
                </td>
                <td>
                    <main>
                        <h1>Welcome to my site.<br>Please come in and stay awhile.</h1>
                        <p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
                        <p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
                        <h2>Product of the week</h2>
                        <a href="products/masks.html">
                            <img src="images/cat1.jpg" alt="Deranged cat"></img>
                            <br>
                        </a>
                        <a href="products/masks.html">20" Deranged cat</a>
                        <br>
                        <br>

                        <h3>My guarantee</h3>
                        <p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <strong>No questions asked!</strong>
                        </p>
                    </main>
                </td>
            </tr>
        </table>
    </section>
    <footer>
        <p>&copy; 2016 Ben Murach</p>
    </footer>
</body>

CSS代码如下： -

html {
    background-color: white;    
}
body  {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 800px;
    background-color: white;
    margin: 0 auto; 
    padding: 0;
    border: 3px solid black;
    box-shadow: 0 9px 18px 9px;
}
h1, h2, h3, p {
    margin: 0;
    padding: 0;
}
a {
    color: white;
}
a:link, a:visited { 
    color: white; 
}


/* Header */
header { 
    background-image: -webkit-linear-gradient(45deg, white 0%, orange 75%, black 100%);
    background-image: -moz-linear-gradient(45deg, white 0%, orange 75%, black 100%);
    background-image: -o-linear-gradient(45deg, white 0%, orange 75%, black 100%);
    background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%);
    padding: 30px; 
    border-bottom: 2px solid black;
} 
header img { 
    float: left; 
    padding-right: 15px;  
} 
header h2 {
    font-size: 230%;
}
header h3 {
    font-size: 125%;
}

/* Main */
main {
    padding: 0px 25px 25px 25px;
}
main h1 { 
    font-size: 140%;
    margin-bottom: .5em;
}
main h1:first-letter { 
    font-size: 240%;
}
main h2 {
    font-size: 125%;
    margin: .8em 0 .5em 0;
}
main h3 {
    font-size: 110%;
    margin-bottom: .5em;
}
main p {
    margin-bottom: .5em;
}
main ul {
    margin-top: 0;
}
main a {
    font-weight: bold;
}



#nav_list ul {
    padding-top: 1.25em;
    padding-left: .8em;
    list-style: none;
}
#nav_list li {
    width: 125px;
    margin-bottom: .5em;
    background-color: orange;
    border: 2px solid black;
}
#nav_list li a {
    display: block;
    padding: .5em .5em .5em .5em;
    text-decoration: none;
    color: black;
    font-weight: bold;
}




section {
    position: relative;
    top: -20px;
}
#nav_bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

#nav_bar li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#nav_bar li a:hover, .dropdown:hover .dropbtn {
    background-color: grey;
}

#nav_bar li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
     background-color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

li .current {

    color: orange;
}

/* Footer */
footer { 
    border-top: 2px solid black;
    padding: 15px;
    background-image: -webkit-linear-gradient(45deg, black 0%, orange 25%, white 100%);
    background-image: -moz-linear-gradient(45deg, black 0%, orange 25%, white 100%);
    background-image: -o-linear-gradient(45deg, black 0%, orange 25%, white 100%);
    background-image: linear-gradient(45deg, black 0%, orange 25%, white 100%);
} 
footer p {
    font-size: 90%;
    text-align: center;
}

双层导航栏不正确的颜色和间距

2 个答案: