Question

我在下拉菜单栏中遇到了一些问题，而且下拉列表也没有正确对齐。

Answer 1

<强> HTML

<div class="container">
  <a href="index.html">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Recipes</button>
    <div class="dropdown-content">
        <a href="recipe1.html"> Choc Chip Cookie</a>
        <a href="recipe2.html">Choc Brownie</a>
        <a href="recipe3.html"> Choc Pretzels </a>

    </div>
  </div> 
    <a href="gallery.html">Gallery</a>
    <a href="contact.html">Contact</a>
</div>

<强> CSS

.container {
    overflow: hidden;
    background-color: #3399CC;
    border-style: solid;
    border-color: black;
    border-width: medium;
    width: 50%;
    margin: auto;
    text-align: center;
    font-family: 'Lobster',cursive;
}

.container a {
    float: left;
    font-size: 22px;
    color: black;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
    align-content: center;
    width: 21%; /* Modified by me to change the width of Home, Gallery and Contact element */
    display: block;
}

.dropdown {
    float: left;
    overflow: hidden;
    width: 24%; /* Modified by me to change the width of Recipe element */
}

.dropdown .dropbtn {
    font-size: 22px;    
    border: none;
    outline: none;
    color: black;
    padding: 10px 14px;
    background-color: inherit;
    font-family: 'Lobster',cursive;

}

.container a:hover, .dropdown:hover { /* Modified by me. Change the background color of dropdown element instead of the button */
    background-color: #52C3EC;
}

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

.dropdown-content a {
    float: none;
    color: black;
    text-align: left;
    padding: 10px 14px;
    padding-left: 40px; /* Modified by me to align the list item in the dropdown menu */
    text-decoration: none;
    display: block;
    width: 78%; /* Modified by me to change the width of the list item in the dropdown menu */
}

.dropdown-content a:hover {
    background-color: #52C3EC;
}

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

我不会更改页面的结构，只会更改其中使用的CSS代码。我已经标记了我修改的代码的哪一部分以及解释。

您仍然可以看到一点空间和Contact元素的结尾。那是因为按百分比缩放大小很难。您可以通过将单位更改为像素来解决此问题。我会把决定留给你。

由于尺寸限制，最好在浏览器中查看结果而不是JSFiddle。

下拉菜单未正确对齐

1 个答案: