此html/css代碼的哪一部分使菜單項突出顯示？

-1

我正在複製一個網站的設計爲另一個（我爲兩家公司的父母工作，沒有版權問題），我似乎無法弄清楚代碼的哪一部分使您目前正在查看的菜單項永久突出（見www.aciscargo.co.uk和比較「家」與「關於我們」這是HTML代碼的菜單部分：此html/css代碼的哪一部分使菜單項突出顯示？

<ul id="menu"> 
      <li><a href="/" id="m_home">Home</a></li> 
      <li><a href="/about-us/" id="m_about-us">About Us</a></li> 
      <li class="expand"><a href="#" id="m_register">Register</a> 
       <ul> 
        <li><a href="/register-freight-forwarder/" id="m_register-freight-forwarder">Register as a forwarder</a></li> 
        <li><a href="/register-broker/" id="m_register-broker">Register as a broker</a></li> 
       </ul> 
      </li> 
      <li class="expand"><a href="#" id="m_our-policies">Our Policies</a> 
       <ul> 
        <li><a href="/freight-forwarder-cargo/" id="m_freight-forwarder-cargo">Freight Forwarder Cargo</a></li> 
       </ul> 
      </li> 
      <li><a href="/security/" id="m_security">Security</a></li> 
      <li><a href="/contact-us/" id="m_contact-us">Contact Us</a></li> 
     </ul>

這是CSS代碼，我認爲是相關（我知道足夠的HTML通常得到，但我不得不用很多谷歌搜索來獲得與CSS）

#menu { 
margin:0 0 12px 0; 
padding:0 0 25px 0; 
position:relative; 
display:block; 
list-style:none; 
background:url('../_images/menu/menu.jpg') bottom left no-repeat; 
} 

#menu li { 
margin:0; 
padding:0; 
position:relative; 
} 

#menu li a { 
width:188px; 
height:21px; 
margin:0; 
padding:5px 0 0 9px; 
line-height:150%; 
display:block; 
background:url('../_images/menu/main.jpg') top left no-repeat; 
font-family:Tahoma, Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#616161; 
text-decoration:none; 
font-weight:bold; 
}

來源

2014-07-04 user3805867

使用您的瀏覽器的開發工具來回答這樣的問題。我推薦Chrome的開發工具。 –

我試過了，它並沒有真正回答這個問題（不是我可以看到的） – user3805867

我認爲顏色部分會這樣做

color:#616161;

它會改變該列表中錨定標記的顏色。

來源

2014-07-04 15:01:03

它是： background:url('../_images/menu/menu.jpg') bottom left no-repeat;

對戰：background:url('../_images/menu/main.jpg') top left no-repeat;

應用上this。

來源

2014-07-04 15:07:35 apapin

但是，它使用兩個不同的圖像？或者那是重點？ – user3805867

body標籤有一個id，CSS用這個來設置背景！important（menu.css line 96）。每個頁面的主體標籤都有一個不同的ID，因此設置了相應的菜單項。

來源

2014-07-04 15:09:43

貌似本節中的menu.css其控制：

#header ul li a:hover, 
#menu li a:hover, 
#b_home #m_home, 
#b_home #h_home, 
#b_about-us #m_about-us, 
#b_register-freight-forwarder #m_register-freight-forwarder, 
#b_register-broker #m_register-broker, 
#b_freight-forwarder-cargo #m_freight-forwarder-cargo, 
#b_freight_liability_policy #m_fre`ight_liability_policy, 
#b_security #m_security, 
#b_contact-us #m_contact-us, 
#b_contact-us #h_contact-us 
{ 
    background-position:bottom left !important; 
}

在他們的聚焦狀態，菜單項具有不同的ID：

<li><a href="/" id="b_home">Home</a></li>

雖然不突出顯示的項目使用：

<li><a href="/" id="m_home">Home</a></li>

希望幫助:)

來源

2014-07-04 15:13:28 DjHexy

對於當前打開的頁面，似乎並不是這種情況，代碼在高亮顯示時仍然顯示m_home：S – user3805867

在當前打開的頁面上，它仍然通過緊跟着（m_home是b_home的孩子，所以匹配css規則」#b_home #m_home「， – DjHexy

此html/css代碼的哪一部分使菜單項突出顯示？

回答

相關問題