Show/hide a list

HTML & CSS
1

hello Gurus…
Hello Gurus,
i’m pretty new to css ( i’m an abaper…) and i’m learning them
I’m trying to show/add a list and an image only by using css. I read many topics but couldn’t understand what i’m doing wrong… any clue?
Thanx in advance.
here my piece of code

ul, .logo:hover>div {
    display: none;
}

.logo:hover> {
    display: block;
}

and the html looks like this

<div class="logo">
<div><img src="images/logo.jpg"  alt="logo" /></div>
<ul><li>item 1 </li>
    <li>item 2</li>
</ul>
</div>
2

Hi Welcome to Sitepoint:)

I’m not sure what you want to trigger the hover action but here is an example that shows how it should work.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.logo>div,.logo> ul { display: none; }
.logo:hover>div,.logo:hover>ul { display: block; }
</style>
</head>

<body>
<div class="logo">
<p>Hover me</p>
		<div><img src="images/logo.jpg"  alt="logo" /></div>
		<ul>
				<li>item 1 </li>
				<li>item 2</li>
		</ul>
</div>
</body>
</html>
3

thanx for the clue but it isn’t exacly what i’m trying to do.
My scenario should be that when the mouse is over the pic, the list is shown and not the pic and vis versa.
I don’t know if i’m clearer.
I will keep trying following the lead your code gave me.
Thanx.

4

Put the ul and the img in a container with position relative. Position absolute the img top/left with z-index 1. Say #container img:hover {display:none}

5

Perhaps something more like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
img {/* for testing only */
	display:block;
	width:100px;
	height:100px;
	background:red
}
.logo> ul { display: none; }
.logo:hover>div { display:none }
.logo:hover>ul { display: block; }
</style>
</head>

<body>
<div class="logo">
		<div><img src="images/logo.jpg"  alt="logo" /></div>
		<ul>
				<li>item 1 </li>
				<li>item 2</li>
				<li>item 3</li>
				<li>item 4</li>
				<li>item 5 </li>
				<li>item 6</li>
				<li>item 7 </li>
				<li>item 8</li>
		</ul>
</div>
</body>
</html>
6

Thanx a lot that was what i’m was trying to do.
I’ll study your code with attention to understand well how i have to think with css and how to control the div ( i can do it with a dynpro in abap lol but not with an html page…)
Thanx again how can rewards points or mention?