css nested unordered list problem.

[zgkhoo]

#menu {
width: 12em;
background: #eee;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

 

 

wat is this line meant?

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

 

very confuse about it  ??? ??? , wat meant by the :hover ul ul ?  wat is ':' <--meant ..thanks...

 

 

 

[Ryokotsusai]

hey i recognize that  came from tanfa i think

 

anyway, I am not sure if this is what your asking, but if the question is what the :hover is then:

 

:hover is a css pseudo-class that targets elements only when they are hovered over (like a rollover effect)

 

like

a:hover {text-decoration:none;}

will remove the underline (and any other decorations) from a <a> tag when the user hovers their mouse over it

 

 

if you were talking about

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

 

specifically, then for this script, here it is hiding the 2nd level menus when nothing is hovered over:

div#menu ul ul ul

 

AND

hiding the 3rd level menus when you are only in the 2nd level menu and not hovering over something that itself has a sub menu:

div#menu ul ul li:hover ul ul

 

(hope that made sense  )

[zgkhoo]

div#menu ul ul ul,

div#menu ul ul li:hover ul ul

{display: none;}

 

div#menu ul ul li:hover ul,

div#menu ul ul ul li:hover ul

{display: block;}

 

thanks..

wat is the above line meant? so many ul ul li , ul ul make me blurr only..  ??? ??? ???

any tutorial site abt it?

 

[zgkhoo]

:hover ul ul

 

thanks..

wat is the above line meant? so many ul ul li , ul ul make me blurr only..  ??? ??? ???

any tutorial site abt it?

 

[dbrimlow]

The multiple ul elements is for styling a nested list.

 

for example this is a 3 level nested list:

<ul>
<li>first list item  before the first nested list
      <ul>
           <li>first nested list item</li>
           <li>first nested list item before second nest
                <ul>
                     <li>second nested list item</li>
                     <li>second nested list item</li>
                 </ul>
            </li>
          </ul>
       </li>
<li>something continues the initial list</li>
</ul>

 

To style the second and third nested lists differently you use:

 

.stylelist ul {color:#000000}

 

.stylelist ul ul {color:#800000}

 

.stylelist ul ul ul {display:block; background-color:#000000; color:#FFFFFF; list-style-type: disk outside;}

 

 

[zgkhoo]

any tutorial site? i cant find it even i google it..

[dbrimlow]

Everything you ever wanted to know about crafting perfect lists using css is at "listamatic".

 

Also, when done with lists, check out the Selectutorial and the floatutorial.

 

Many of us Pros still go back to maxdesign every so often for a refresher.

 

http://css.maxdesign.com.au/index.htm

 

Dave