div's and ul's

[countdrac]

hi

 

i am having difficulty understanding why these two things alone dont do anything at all, but together the SECOND one is active ONLY?

 

#menu is a div

#years is a ul

 

also

 

#menu #years li:hover{

background: green;

color:white;

text-decoration: none;

list-style: square;

}

/* 2 */

#years li:hover{

background: purple;

color:white;

text-decoration: none;

}

 

(the colours and list-style are there to only illustrate which one appears)

 

thanks

[bronzemonkey]

Need to see what else is going on to give you the result you're talking about because #menu #years li:hover is always going to override #years li:hover because it has a higher specificity. Post a bit more code and hopefully we can find out what might be causing the problem here.

[countdrac]

hi

 

By the way im kinda new to css and the basis of this menu was taken from another website... almost all that was taken has however been changed (i just mean that i probably wont know the obvious stuff wrong here)

 

ive taken the dynamic and php stuff and this is whats left...

 

infact there are quite a few bugs:

a file links only work when the mouse goes over the link text (and not the whole box as it should). the only links are the ones in the id=file

 

b the years list is ontop of the file lists when it comes up (not the other way as it should be)

 

c and for some reason the boxes of the individual files sometimes come up as like a double border-width (like every 4th or so box on the list)

 

<div id="menu">

<ul>

<div id="menuArchive">

  <li>Archive

<ul id="years">

                        <li>".$count."  //count is just a variable that repeats this process 4 times

                            <ul id='file'>";"                                     

                                  <li><a href='link'>link</a></li> //this is really in a loop that dynamically generates these things

                            </ul>

                      </li>

 

 

        </ul>

  </li>

</div>

</ul>

</div>

 

This is the stylesheet:

 

#first, #menu{

position: relative;

background: transparent;

border: none;

width: 0;

margin: 0;

top: 0;

left: 0;

padding: 0;

}

 

#archive{

top:0;

margin: 0;

position:relative;

}

 

#menuArchive{ /* the "Archives"  */

position: absolute;

cursor: default;

color: navy;

width: 8em;

text-indent: 0px;

text-align: left;

padding: 1px;

font-family: arial;

font-size: 15px;

list-style: none;

top: 1px;

left: 0;

margin: 0;

}

 

 

#file{

text-decoration: none;

margin: 0;

padding: 3px;

font-family: times;

font-size: 14px;

list-style: disc;

position: absolute;

left: 70%;

top: 0;

}

 

#years li{

position: relative;

margin: 0;

padding: 2px;

list-style: none;

font-size: 13px;

font-family: arial;

color: green;

border-color: navy;

border-style: solid;

border-width: 0.5px;

width: 7em;

background: yellow;

left: 0%;

}

 

ul ul ul{ /* hide what the #file is contained in */

border:none;

background: transparent;

}

 

 

 

/* 1 the next two have to both be here seperately in order to work*/

#menu #years li:hover{

background: green;

color:white;

text-decoration: none;

 

}

/* 2 */

#years li:hover{

background: purple;

color:lime;

text-decoration: none;

}

/** - **/

 

 

 

#menu #file li:hover{

text-decoration: none;

background: red;

color: white;

}

 

#menu #file li{

text-decoration: none;

background: white;

color: navy;

}

 

div#menu ul ul ul,

div#menu ul ul,

div#menu ul li:hover ul ul{

display:none;

}

 

div#menu ul ul li:hover ul,

div#menu ul li:hover ul,

div#menu ul ul ul li:hover ul{

display: block;

}

[countdrac]

also the way i solved most of my problems is by just putting different stuff into the stylesheet eg using transparent by trail and error (put the same thing into the different id's and see which one works) - i dont even know what i was hiding so if you know how i can use that properly that it would also be helpful

 

thanks