Question

正如您所看到的，我注释了下拉菜单的代码，菜单有效。但它与导航栏的其余部分不一致。任何帮助表示赞赏。

    <div id="top_nav">
        <div id="top_nav_container">
          <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="redacted.php">Redacted</a></li>
            <li><a href="how_it_works.php">How It Works</a></li>
            <li><a href="faqs.php">FAQs</a></li>
            <li><a href="special_offers.php">Special Offers</a></li>
            <li><a href="customer_service.php">Customer Service</a></li>
          <!-- <span class="dropdown">
               <span class="dropbtn">Special Offers</span>
               <span class="dropdown-content">
                   <a href="#">Link 1</a>
                   <a href="#">Link 2</a>
                   <a href="#">Link 3</a>
               </span>  -->
          </ul>
        </div>

这是CSS - 原件朝向底部（在“cont。”之后，顶部后来从外部源添加）

/* TOP NAV */
/* dd

/* Style The Dropdown Button */
.dropbtn {
    background-color: #5d72b3;
    color: white;
    margin:auto;
    padding: 0px;
    text-align:center;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration:none;
    border-right:1px solid #FFF;
    padding:9px 12px 0 12px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}


/*________________________cont. */
#top_nav_container {
    position:relative;
    width:1000px;
    margin:auto;
    height:33px;
}
#top_nav {
    width:1000px;
    height:33px;
    background-color:#5d72b3;
    border-bottom:1px solid #FFF;
    border-top:1px solid #FFF;
    margin:auto;
}
#top_nav ul {
    width:849px;
    margin:0;
    padding:0;
    list-style:none;
}
#top_nav ul li {float: left;}
#top_nav ul li a {
    display:block;
    width:auto;
    height:24px;
    text-align:center;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    text-decoration:none;
    border-right:1px solid #FFF;
    padding:9px 12px 0 12px;
}
#top_nav ul li a:hover {
    background-color:#86a3ff;
}
#sub_nav_bar {
    width:1000px;
    height:40px;
    margin:0 auto 6px auto;
    text-align:center;
}

编辑公司信息djdjsjshsjshhshshshshshshshshshshshshshshshshshhshshs Sjshshsjs Hshshshshshshsh jsjsjsjsjhshss

Answer 1

.dropbtn { display: block;
height: 24px; }

导航栏上的下拉菜单。 -Drop down按钮未与其余导航按钮对齐。 HTML

1 个答案: