interfering with tag

 id="Syllabus" class="syl">
     href="#">
    
     class="ul_menu">
        
 href="#">link 1
        
 href="#">link 2
    

And here's my 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;
}

When I view this code in any browser, the background-image: url(/Assets/Syb_but.png); is generated everytime by the