我有一個樣式表,旨在創建一個整潔的菜單,它的效果很好。問題是我需要將此菜單移動到需要不同樣式元素的網頁中。 編輯!當樣式表由新頁面加載時,它將它們完全擰緊!將樣式應用於整個頁面是非啓動器!這是整個問題在這裏......css - 從外部樣式錶轉換爲內聯;不知道一些「下拉」風格去哪裏
因爲我們顯然沒有能力「範圍」有效(併爲大家服務,對吧?),或者如果我們這樣做,我沒有發現如何.. 。所以我想我只是將樣式轉移到各個元素上,問題是我沒有看到這些樣式中的某些應該去哪裏!
指向一個很好的參考,有助於澄清這將是偉大的,或只是一些項目去哪裏工作的意見!
這裏是CSS - 它相當短!我已經刪除了我已經知道哪裏去...
.dropbtn
{
display: inline-block;
color: white;
text-align: left;
padding: 8px 16px;
text-decoration: none;
}
.dropdown:hover .dropbtn
{
background-color: #111;
}
li.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: navy;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: white;
padding: 8px 16px;
text-decoration: none;
display: block;
text-aligh: left;
}
.dropdown-content a:hover
{
background-color: blue;
}
.dropdown:hover .dropdown-content
{
display: block;
}
這裏的原始菜單 - 編輯名稱以保護有罪!
<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: navy;" >
<li class="dropdown" style="float:left;">
<a href="http://example.com/first.html" class="dropbtn">
First Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float:left;">
<a href="http://example.com/second.html" class="dropbtn">
Second Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float:left;">
<a href="http://example.com/fourth.html" class="dropbtn">
Fourth Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
</div>
</li>
<li style="float:right" class="dropdown">
<a href="http://example.com/fifth.html" class="dropbtn">
Fifth Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
</div>
</li>
</ul>
...我不知道如何設置像「懸停」這樣的內容的樣式!
感謝您的指點。
「完全擰緊」 - 如何?這些頁面與當前工作的頁面如此不同,HTML的外觀如何? – Jhecht
@Jhecht ...特別是,正如我注意到下面的亞歷山大,列表是畸形的。在到達行尾之前,它們是水平的而不是垂直的,然後用下一個列表元素開始一個新行。還有一些其他輕微的擰緊。 ......如下所述,我找到了一個解決方案;儘可能多地將內聯樣式格式 - 僅用於菜單,介意您 - 並將其從樣式表中移除,並繼續使用這兩種格式。我不知道如何指定的更隱晦的樣式功能仍然保留在樣式表中。有用! –
我不能特別說我同意這個解決方案,但是如果它有效的話。我真的不理解你爲什麼不使用不同的類名來表示不是水平定向的列表。 – Jhecht