0
我對以下項目的工作：下拉菜單並不穩定
/* Second Bar */
.header-two-bars .header-second-bar {
\t background-color: #ffffff;
\t box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
\t padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
\t font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
\t display: inline-block;
\t color: #4e5359;
\t text-decoration: none;
\t padding-left: 12px;
\t padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
\t border-radius: 2px;
\t background-color: #2B5773;
\t padding-top:8px;
\t padding-bottom: 8px;
\t color: white;
\t opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
\t border-radius: 2px;
\t background-color: #2B5773;
\t padding: 8px 12px;
\t color: white;
}
.clear {
\t clear: both;
}
/*Dropdown menu*/
.dropbtn {
\t cursor: pointer;
\t }
\t .dropdown {
\t position: relative;
\t display: inline-block;
\t }
\t .dropdown-content {
\t display: none;
\t margin-top: 0px;
\t position: absolute;
\t background-color: #f9f9f9;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t z-index: 99;
\t }
\t .dropdown-content a {
\t color: black;
\t padding: 12px 16px;
\t text-decoration: none;
\t width: inherit;
\t }
\t .dropdown-content a:hover {
\t \t background-color: #f1f1f1;
\t padding-top: initial;
padding-bottom: initial; }
\t .dropdown:hover .dropdown-content {
\t display: block;
\t }
\t .dropdown:hover .dropbtn {
\t }<div class="header-second-bar">
\t \t \t <div class="header-limiter">
\t \t \t \t <nav>
\t \t \t \t \t <span class="dropdown">
\t \t \t \t \t \t <a href="#" class="dropbtn">Home</a>
\t \t \t \t \t \t <div class="dropdown-content">
\t \t \t \t \t \t \t <a href="#" style="display: block;">Men</a>
\t \t \t \t \t \t \t <a href="#" style="display: block;">Women</a>
\t \t \t \t \t \t </div>
\t \t \t \t \t </span>
\t \t \t \t \t <a href="#" style="color: pink;">Blog</a>
\t \t \t \t \t <a href="#" style="color: pink;">Promo</a>
\t \t \t \t </nav>
\t \t \t \t <div class="clear"></div>
\t \t \t </div>
\t \t </div>一切工作正常，但是當我實現了dowpdown菜單，我開始有一個錯誤，當我試圖懸停在下拉列表Men和Women。我認爲這是由於padding-top適用於.header-two-bars .header-second-bar nav a:hover
我也不想刪除它，因爲其他按鈕Blog，Promo需要它。
我該如何解決這個問題，而不刪除padding-top申請.header-two-bars .header-second-bar nav a:hover？
除了消除導致問題的冗餘代碼之外，這個解決方案還有點不明白。請參閱@基灣的回答。它只是面臨問題，刪除冗餘代碼並使解決方案更加優雅。 – Narxx