By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,511 Members | 1,178 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,511 IT Pros & Developers. It's quick & easy.

How to make the HTML link activated by clicking on the <li>

P: 5
I have the following markup:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id="treeMenu">
  3. <ul>
  4.     <li class="main"><a href="#">Item1</a></li>
  5.     <li class="main"><a href="#">Item2</a></li>
  6.     <li class="contentContainer"><a href="#">Item3</a>
  7.      <ul style="display: none">
  8.       <li class="contentContainer"><a href="#">Item3.1</a>
  9.         <ul style="display: none" >
  10.          <li><a href="#">Item3.1.1</a></li>                                            </ul>
  11.       </li> 
  12.      </ul>
  13.     </li> 
  14. </ul> 
  15. </div>
  16.  

The link doesn't work.
I suppose the problem in CSS that is the following:

Expand|Select|Wrap|Line Numbers
  1. #treeMenu ul li {
  2.      float: down;
  3.      position: relative;
  4. }
  5.  
  6. #treeMenu ul li a {
  7.      margin:0px 0px 0px 140px;
  8.      padding:10px;
  9.      display:block;   
  10.      text-decoration:none;
  11.      color:#B1ADBC;      
  12. }
  13.  
  14. #treeMenu ul li ul {
  15.      display: none
  16. }
  17.  
  18. .contentContainer ul, .contentViewing ul {
  19.     padding-left: 15px;
  20.     padding-bottom: 5px;
  21.     color: #69F;
  22.     border-bottom: none;
  23.     border-right: none;
  24. }
  25.  
Appreciate any help and advice how to have links work for this tree-structure.
May 13 '12 #1
Share this Question
Share on Google+
10 Replies


Dormilich
Expert Mod 5K+
P: 8,639
why should it work? the links point to empty anchors.
May 14 '12 #2

P: 5
of course, I added .html pages to anchors in my case.

the question is why this algorithm doesn't open them while being on one .html page and trying to open others from there. In case of success it doesn't allow to return to previous .html page after activation of any other .html page
May 14 '12 #3

Dormilich
Expert Mod 5K+
P: 8,639
the question is why this algorithm doesn't open them while being on one .html page and trying to open others from there. In case of success it doesn't allow to return to previous .html page after activation of any other .html page
can you elaborate on that? I didn’t understand that at all.
May 14 '12 #4

P: 5
I succeeded to activate links for Item1, Item2, but not for Item3.1.1

it means that after opening Item1 (and being on its .html page) I could go to Item2 (another .html page) but I can't return after that from page of Item2 to page of Item1.

As for Item3.1.1 I didn't succeed to open it at all.
May 14 '12 #5

Dormilich
Expert Mod 5K+
P: 8,639
without a live demo page I am afraid to be out of ideas.
May 14 '12 #6

Rabbit
Expert Mod 10K+
P: 12,430
I think they mean that their final hidden link isn't showing up when they hover over the link above it. And of course it won't. You haven't implemented any style to bring it back into view. You need to use the :hover pseudo-class to bring the other link back into view.
May 14 '12 #7

P: 5
that is what exactly I use for my :hover :

Expand|Select|Wrap|Line Numbers
  1. #treeMenu ul li a:hover {
  2.  
  3.      color:#FFF;
  4.      text-align: left;
  5.      border-bottom: none;
  6.      border-right: none;
  7.  
  8.  }
  9.  
  10.  
  11. #treeMenu ul li a:hover ul li a {
  12.      display:block;
  13.      background: none;   
  14.      color:#FFF;
  15.      width: 110px;   
  16.      text-align: center;
  17.      border-bottom: none;
  18.      border-right: none;
  19. }
  20.  
  21. #treeMenu ul li:hover ul li a:hover {
  22.      background:none;
  23.      color:#fff;
  24. }
  25.  
  26.  
May 15 '12 #8

Rabbit
Expert Mod 10K+
P: 12,430
Except that you never posted that in the original post.

So it's not showing the link when you hover over the parent link?
May 15 '12 #9

P: 5
No, it shows the link when when I hover over the parent link.
May 15 '12 #10

Rabbit
Expert Mod 10K+
P: 12,430
Then, like Dormilich, I don't know what the question is.
May 15 '12 #11

Post your reply

Sign in to post your reply or Sign up for a free account.