473,320 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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
10 2777
Dormilich
8,658 Expert Mod 8TB
why should it work? the links point to empty anchors.
May 14 '12 #2
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
8,658 Expert Mod 8TB
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
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
8,658 Expert Mod 8TB
without a live demo page I am afraid to be out of ideas.
May 14 '12 #6
Rabbit
12,516 Expert Mod 8TB
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
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
12,516 Expert Mod 8TB
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
No, it shows the link when when I hover over the parent link.
May 15 '12 #10
Rabbit
12,516 Expert Mod 8TB
Then, like Dormilich, I don't know what the question is.
May 15 '12 #11

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

Similar topics

2
by: Gregor Horvath | last post by:
Hi, Before I reinvent the wheel I`d like to ask if someone has done this before since I did not find an advice at Google. The goal is to create a dynamic Tree View in HTML. Say I have a...
8
by: Michael | last post by:
This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...
5
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...
4
by: Matt | last post by:
Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...
5
by: Joakim Braun | last post by:
I'd like to show tree structures using collapsible multi-level nested <ul> lists (with open/closed "disclosure triangles" as list-style-images). Something like this: <ul> <li...
4
by: abs | last post by:
Anybody has an idea how to get the <ul> element which is not nested in <li> element ? In other words I have several lists like this: <ul id="1"> <li>Aaaaaaaa</li> <li>Bbbbbbbb</li>...
2
by: Shaun | last post by:
Hello! I have a quick question regarding CSS and having it applied to all elements. I am trying to eliminate the gap between a paragraph and a list that usually occurs in html and I've found...
2
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
7
by: patrick j | last post by:
Hi I'm wondering about lists with nested lists as one does on a Saturday afternoon. Anyway below is an example of a list with a nested list which the iCab browser's very useful HTML...
1
by: Chinsu | last post by:
<html> <head> <style> #ex { width: 700px; background: red; float: left; } a, span { display: block;
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.