Unordered List Style

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
                              <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>
                       <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>
.sm-lists li {
    font-family: "open sans";
    font-size: 12pt;
    list-style: square;

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

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

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

<a href="products.html">

you want this:

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

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

1 Like

Try using this free validation tool.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.