html - <ul>干扰<a>标签

这是我的HTML结构：

<div id="Syllabus" class="syl">
    <a href="#">
    </a>
    <ul class="ul_menu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</div>

这是我的CSS：

#Syllabus a {
    position:          absolute;
    top:               0px;
    left:              130px;
    width:             112px;
    height:            40px;
    background-image:  url(/Assets/Syb_but.png);
    background-repeat: no-repeat;
}

#Syllabus a:hover {
    background-image: url(/Assets/QuesPap_but_ul.png);
}

.ul_menu {
    position: relative;
    top:      44px;
    left:     43px;
    display:  none;
}

ul, li {
    margin:  auto;
    padding: 0;
}

当我在任何浏览器中查看此代码时，background-image: url(/Assets/Syb_but.png);都是由<li>标记每次生成的。也就是说，sym_but.png和第一个一起出现在link1和link2的右侧。

最佳答案

#Syllabus a是后代选择器。这意味着该规则将应用于#Syllabus的所有后代。

使用子选择器将仅选择作为#Syllabus的直接子项的锚：#Syllabus > a。

#Syllabus > a {
    position:          absolute;
    top:               0px;
    left:              130px;
    width:             112px;
    height:            40px;
    background-image:  url(/Assets/Syb_but.png);
    background-repeat: no-repeat;
}

#Syllabus > a:hover {
    background-image: url(/Assets/QuesPap_but_ul.png);
}

.ul_menu {
    position: relative;
    top:      44px;
    left:     43px;
    display:  none;
}

ul, li {
    margin:  auto;
    padding: 0;
}