Question

我正在将一个网站的设计复制到另一个网站（我为两家公司的母公司工作，没有版权问题）我似乎无法弄清楚代码的哪一部分会使您正在查看的菜单项目永久突出显示（请参阅www.aciscargo.co.uk并将“Home”与“About Us”进行比较。这是HTML代码的菜单部分：

<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，但是我必须使用很多Googling来获取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;
}

Answer 1

我认为颜色部分会这样做

color:#616161;

它会改变该列表中锚标记的颜色。

Answer 2

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

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

应用于this。

Answer 3

body标签有一个id，CSS使用它来设置背景！important（menu.css第96行）。每个页面的正文标记都有不同的ID，因此设置了相应的菜单项。

Answer 4

看起来它在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>

希望有所帮助：）

这个html / css代码的哪一部分使菜单项突出显示？

4 个答案: