Css code changing entire page layout

Question

I created an image with the effect of hover which shows a listing on top of it when passing the mouse, only that the code is changing the entire layout.

CSS:

div a {
    text-decoration: none;
    color: white;
    font-size: 23px;
    padding: 0px;
    display:block;
}
ul {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}
ul li {
    display: inline-block;
}
ul li:hover {
    display: block;
    background: #EA3F3F;
}
ul li:hover ul {
    display: block;
}
ul li ul {
    position: absolute;
    width: 220px;
    display: none;
}
ul li ul li {
    background: #555;
    display: inline;
    font-size:23px;
    font-weight:bold;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    opacity:1;
}
ul li ul li a {
    display:block !important;
}
ul li ul li:hover {
    background: #475DDA;
}

HTML:

<div>
    <ul>
        <li>
            <img align='left' src='http://oi58.tinypic.com/2lxrh2.jpg' />
            <ul>
                <p>
                    <li> <a href='#'>0 - 9</a>
                    </li>
                    <li> <a href='#'>A - C</a>
                    </li>
                    <li> <a href='#'>D - F</a>
                    </li>
                    <li> <a href='#'>G - I</a>
                    </li>
                    <li> <a href='#'>J - L</a>
                    </li>
                    <li> <a href='#'>M - O</a>
                    </li>
                    <li> <a href='#'>P - R</a>
                    </li>
                    <li> <a href='#'>S - U</a>
                    </li>
                    <li> <a href='#'>V - X</a>
                    </li>
                    <li> <a href='#'>Y - Z</a>
                    </li>
                </p>
            </ul>
        </li>
    </ul>
</div>

I understand the problem is in . css where

div a {
ul li {
ul li:hover {
ul li:hover ul {
ul li ul {

They’re changing the entire layout, it would be possible to make this code be interpreted only in this image?

If not, how do I pass these css lines to only work in the photo? I tried to put id in the div but I can’t do the effects on .css amend the list.

Answer 1

You can use a class in your div main and set the css from the same. Thus isolating the style of the div the rest of the layout. Your code would look like this:

HTML:

<div class="divComImagem">
 <!--Aqui o resto de seu conteúdo-->
</div>

CSS:

.divComImagem a {
    text-decoration: none;
    color: white;
    font-size: 23px;
    padding: 0px;
    display:block;
}
.divComImagem ul {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}
.divComImagem ul li {
    display: inline-block;
}
.divComImagem ul li:hover {
    display: block;
    background: #EA3F3F;
}
.divComImagem ul li:hover ul {
    display: block;
}
.divComImagem ul li ul {
    position: absolute;
    width: 220px;
    display: none;
}
.divComImagem ul li ul li {
    background: #555;
    display: inline;
    font-size:23px;
    font-weight:bold;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    opacity:1;
}
.divComImagem ul li ul li a {
    display:block !important;
}
.divComImagem ul li ul li:hover {
    background: #475DDA;
}

Follows the jsfiddle