Unordered List Style

[csosa]

Hello I have an UL List that im styling and when I nest it hovers
everything when I hover everything and the word “Products” does
not turn color black it stayed to its default color; The links also hover when
you go outside of the list. PAGE

<div class="sitemap-list">
                    <ul class="sm-lists">
                       <a href="index.html"><li>Home</li></a>
                       <a href="aboutus.html"><li>About Us</li></a>
                       <a href="products.html"><li>Products
                           <ul>
                              <a href="shocklabels.html"><li>Shock Indicator Labels</li></a>
                              <a href="tiltindicator.html"><li>Tilt Indicator Label</li></a>
                              <a href="protectapak.html"><li>Protect-A-Pak</li></a>
                              <a href="omnig.html"><li>OMNI-G</li></a>
                              <a href="omnigs.html"><li>OMNI-G-S</li></a>
                              <a href="shockfuse.html"><li>Shock Fuse</li></a>
                              <a href="transmonitor.html"><li>Transmonitor</li></a>
                              <a href="transmonitortd.html"><li>Transmonitor TD</li></a>
                              <a href="impactographanalog.html"><li>Impact-O-Graph</li></a>
                              <a href="digishock.html"><li>Digi-Shock</li></a>
                           </ul>
                      </li></a>
                       <a href="contactus.html"><li>Contact Us</li></a>
                       <a href="distributors.html"><li>Distributors</li></a>
                       <a href="downloads.html"><li>Downloads</li></a>
                       <a href="news.html"><li>News</li></li></a>
                       <a href="reviews.html"><li>Reviews</li></a>
                       <a href="privacypolicy.html"><li>Privacy Policy</li></a>
                       <a href="termsconditions.html"><li>Terms & Conditions</li></a>
                   </ul>
                </div>

.sm-lists li {
    font-family: "open sans";
    font-size: 12pt;
    list-style: square;
    color:black;
    
}

.sm-lists li:hover {
    color: #da272f;
    text-decoration: underline;
}

.sm-lists a {
    text-decoration: none;
}

[ralphm]

You have your elements the wrong way around. Rather than this:

<a href="products.html">
  <li>Products
    <ul>
    </ul>
  <li>
</a>

you want this:

<li><a href="products.html">Products</a>
  <ul>
  </ul>
<li>

So wrap the <a> just around the actual link text.

[John_Betong]

Try using this free validation tool.

http://validator.w3.org/