CSS help
» >
»
» View previous topic :: View next topic  
Well, I started now with a website. It uses a list where the sub-lists don't appear until you hover over the <li> thing. It works with the first sub-list, but with the second it doesn't. I have inside the <ul> tags of the complete list id="navigation". For that I have that css code:

Code:
#navigation  li  ul {
   display: none;
}
#navigation  li:hover ul {
   display: block;
}
#navigation  li  ul  li  ul {
   display: none;
}
#navigation  li  ul  li:hover ul {
   display: block;
}

Hope you get my problem.... It's hard to describe! :S Thanks for any help!


EDIT: well, it seems that this thread ends without a single post! I found a solution:

Code:
#navigation  li  ul { 
   display: none;
}
#navigation  li:hover ul {
   display: block;
}
#navigation  li  ul  li  ul li {
   display: none;
}
#navigation  li  ul  li:hover ul li {
   display: block;
}

Admins may delete this thread if they want.
Omnimaga! Click here to give me an internet!

Code:
#navigation  li:hover ul {
    display: block;
 }
 #navigation  li  ul  li  ul {
    display: none;
 }

li:hover is more specific than li, so that rule takes precedence. Also, "li:hover ul" means "ul which is a descendent of li:hover", which makes it match all descendent uls of the hovered li, not just the immediate child.


Code:
#navigation li ul {
   display: none;
}
#navigation li:hover > ul {
   display: block;
}

This code should replace all four rules in your CSS; the > makes the display: block rule only apply to the immediate child of the hovered li.
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
CSS help
»
» View previous topic :: View next topic  
Page 1 of 1
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement