Css code changing entire page layout

Question

Css code changing entire page layout

Navigation

#1 by (3 votes)

3

I created an image with hover effect that shows a listing on top of it when mouseover, but 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 that the problem is in .css where

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

Are changing the entire layout, could you make this code to be interpreted only in this image?

If not, how do I pass these css lines to work only in the photo? I tried by id in the div but I can not make the effects on%% change the list.

html css

asked by anonymous 13.10.2015 / 23:10

1 answer

Correct use of Laravel Mutators 5.1. Is it possible to use in this way described below? View a Direct Message on the MainPage page

score 3 · Accepted Answer

You can use a class in your div main% and set css from it. So isolating the style of div from 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;
}

Follow the jsfiddle