Drop-Down List Menu

I'm perplexed by this, knowing there is a possible way for it to work, though, I must be doing something wrong. I'll post my two thoughts on the methods, and if you can somehow debunk it, I would be greatly thankful.

CSS

li {display:none}
li:hover {display:block}

HTML

<ul>List
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


Method 2

CSS

li {display:none}

HTML

<ul onmouseover="li.style='display:block'" onmouseout="li.style='display:none'">List
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


I'm trying to make a drop-down menu with this, but it doesn't seem to be working. Thank you in advance for any help.

To start with the word "List" is invalid where it is and so may be interfering (only <li> tags can go inside a <ul> everything else has to go inside the <li>s).

Also what browser are you using as Internet Explorer 6 doesn't understand :hover unless it is a part of a:hover.

Finally your Javascript in method 2 is coded wrongly - it needs to be:

onmouseover="var li = document.getElementsByTagName('li');for (var i = 0; i < li.length; i++) li[i].style.display = 'block';"

and similarly for the onmouseout

Thank you again, for helping me, cudos. I would, however, like that javascript explained so I can use that for other elements, as well. Thank you.