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

[roxana85]

I have the following markup:

<div id="treeMenu">
<ul>
    <li class="main"><a href="#">Item1</a></li>
    <li class="main"><a href="#">Item2</a></li>
    <li class="contentContainer"><a href="#">Item3</a>
     <ul style="display: none">
      <li class="contentContainer"><a href="#">Item3.1</a>
        <ul style="display: none" >
         <li><a href="#">Item3.1.1</a></li>              	     				     </ul>
      </li> 
     </ul>
    </li> 
</ul> 
</div>

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

#treeMenu ul li {
     float: down;
     position: relative;
}
 
#treeMenu ul li a {
     margin:0px 0px 0px 140px;
     padding:10px;
     display:block;   
     text-decoration:none;
     color:#B1ADBC;      
}
 
#treeMenu ul li ul {
     display: none
}

.contentContainer ul, .contentViewing ul {
	padding-left: 15px;
	padding-bottom: 5px;
	color: #69F;
	border-bottom: none;
    border-right: none;
}

Appreciate any help and advice how to have links work for this tree-structure.

[Dormilich]

why should it work? the links point to empty anchors.

[roxana85]

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

[Dormilich]

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.

[roxana85]

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.

[Dormilich]

without a live demo page I am afraid to be out of ideas.

[Rabbit]

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.

[roxana85]

that is what exactly I use for my :hover :

#treeMenu ul li a:hover {
	 
     color:#FFF;
     text-align: left;
     border-bottom: none;
     border-right: none;
	 
 }
	 
 
#treeMenu ul li a:hover ul li a {
     display:block;
     background: none;   
     color:#FFF;
     width: 110px;   
     text-align: center;
     border-bottom: none;
     border-right: none;
}
 
#treeMenu ul li:hover ul li a:hover {
     background:none;
     color:#fff;
}

[Rabbit]

Except that you never posted that in the original post.

So it's not showing the link when you hover over the parent link?

[roxana85]

No, it shows the link when when I hover over the parent link.

[Rabbit]

Then, like Dormilich, I don't know what the question is.