Clever Geek Handbook

Why can't I hide my 'ul' with CSS like this?

I used the ul in the paragraph tag and used CSS to hide it, but it won't work. How can I fix this?

Here is my HTML content:

<p id="transport">
    <img class="draco" src="../image/draco.png"/>
    <ul>
        <li><a href="">a</a></li>
        <li><a href="">b</a></li>
        <li><a href="">c</a></li>
        <li><a href="">d</a></li>
        <li><a href=""></a></li>
    </ul>
</p>

And here is my CSS content:

p#transport ul {
    background-color: rgba(0,0,0,1.0);
    position: absolute;
    float: right;
    display: none;
}

p#transport:hover ul {
    display: block;
}
+3


source to share


2 answers


This is because you cannot fit ul

inside p

. The browser interprets it as if you forgot to close the tag p

and close it yourself. It is for this reason that CSS rules do not apply.



Change the tag p

to div

and it will work fine.

+4


source


This is because you cannot have ul

inside a tag p

. Most browsers will change the HTML for you: place ul

outside the tag p

. This is how it might end up looking like:

<p id="transport">
    <img class="draco" src="../image/draco.png">
</p>
<ul>
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
    <li><a href="">d</a></li>
    <li><a href=""></a></li>
</ul>
<p></p>

Check out http://jsfiddle.net/6a0awqgv/embedded/result/ . Compare the source code to the item inspector in your console.



Thus, to overcome this you can do:

p#transport + ul {
    background-color: rgba(0,0,0,1.0);
    position: absolute;
    float: right;
    display: none;
}

p#transport:hover + ul{
    display: block;
}

+

This is the adjacent selector

+4


source






More articles:


All Articles