[SOLVED] css driven menu help

[Stickybomb]

ok i am having problems trying to create a simple ul menu with css

 

exp:

 

HTML

<ul class="menu">
    <li><a href="/">Test link #1</a>
        <ul>
            <li><a href="/">Submenu link #1</a></li>
            <li><a href="/">Submenu link #2</a></li>
        </ul>
    </li>

    <li><a href="/">Test link #2</a>
            <ul>
                <li><a href="/">Submenu link #3</a></li>                
                <li><a href="/">Submenu link #4</a></li>                
                <li><a href="/">Submenu link #5</a></li>                                
            </ul>
     </li>
</ul>

 

basically i am just trying to grasp the idea of how it works, i have done them using javascript before but would like to learn how to do it with only css. i know css so i can format the text and background colors and background hovers. My main problem is that i can not seem to figure out how you hide and display the menu using only the hover, if anyone could explain this to me  it would help alot.

 

my attempt

 

CSS

.menu,.menu ul { list-style : none; }
.menu {font-family:veranda; font-weight:bolder;font-size:12px; color:white;}
.menu ul {display:none;}
.menu li {background:#7f8fbf; display:inline;}
.menu li:hover {background:#7f80b0;}
.menu li:hover ul {display:box;}
.menu il ul li:hover {background:#7f80b0;}

[ToonMariner]

google sucker fish - you will get plenty of delicious results.

[robhilly]

Well, I tested out the code you showed out of curiosity.  The main reason the menu is displaying is because in one of your css lines:

 

.menu li:hover ul {display:box;}

 

the box value you assigned to the display property does not seem to exist, according to the reference sheet found at http://www.w3schools.com/css/css_reference.asp

 

If you replace the box display value with block like this:

 

.menu li:hover ul {display:block;}

 

then the menu should work as it did with me