Nested <a> and <span> challenge

Question

Hi all,

Trying in vain to get a nested link working within a nested span. This is a working test page for the code below to explain what I'm trying to do.

Any ideas on how to get this working in valid html? I guess it's either a nesting order or style syntax thing but I am at a loss. Any thoughts much appreciated.

<div id="greyback">
<ul id="scrollbox">
<li class="listcat">List header</li>
<li><a class="menu" href="#freeze">List item 1<span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b><br><br>What I am trying to do is to set the second "a" tag as a DIFFERENT "embedded" link in this box<span style="color: blue; background-color: yellow;">eg, here<a href="http://www.conservationenterprises.com" target="blank">This is the second (nested) "a" tag in this html nest.  It is a link to an external site. Instead of this being an always-visible link, I want it to sit within the yellow box in the first span (click the List item 1 to display).</a></span>
</a></span>
</li>
</a></span>
</li>
</ul>
</div>

and the CSS:

#scrollbox  {margin: 0 auto; margin-top: 1em;  margin-bottom: 1em; width:19em; height:auto;  max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500;}

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}
#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active {border:none; color: #535353; text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span  {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #c3FFe3; color: #535353; border: solid #FFA500 0.25em;}
#scrollbox li a:active span span, #scrollbox li a:focus span span{display: block; width: auto; height: auto; min-height: 2em;  left: 25em; top:10em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: transparent; color: #535353;  border: dashed red 1px;}

.ul#scrollbox {padding-left: 0.1em;}

#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: 0em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox li.listcat {float: left; text-align:left; width: 18em; margin-left: 0em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 0.9em; font-weight:bold;} 

Cheers Patrick.

Answer 1

Yes, you have your closing tags in the wrong place and I think you have spans misplaced but just validating will show you those errors.

Answer 2

provided you are using jquery(or a similar javascript framework that uses the $ sign):

<div id="popup" style="display: hidden">
   <span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b>
</div>

<li>
  <a href="your first link" onclick="$('popup').setStyle('display: block;')">first link</a>
  <a href="second link">second link</a>
</li>

you could also use onfocus as substitute for onclick. if you don't have a javascript library, use document.getElementById('popup') instead of the $ sign.

here's a really simple tutorial on how to hide some divs in jquery: http://api.jquery.com/hide/

Answer 3

You'll certainly need to use Javascript for this (although certainly not Jquery, especially if Javascript already seems foreign to you). Right now, you're trying to embed a link inside another link and I don't think that can ever work correctly.

I would suggest using unique div ids and the HTML DOM do display your divs and links. This is oversimplified, but something like this:

<div id="one"><a href="#" onclick="document.getElementById('two').style.display='block'">Link 1</a></div>
<div id="two" style="display: none;">Here it is</div>

W3Schools.com has a really good Javascript tutorial to get you started.

Edit: A couple of side notes. Learning Javascript fundamentals will be well worth your time. Also, try to always use well-formed html.