An alternative to <a> tag for a Hyper text-email link. JS screws up my drop down as it is based on <a> tags

Question

I'm stumped. Developing a website for a friend, the navigation is a drop down system that I got from http://www.dynamicdrive.com/.

The code for the drop down wants me to put links in <a> tags and the JS formats them into drop down elements.

What I want to do is have the second drop down, on the "Contact" element of navigation, to have contact details and an email link. I have succeeded in getting it to work in the fashion I want, except I cannot get the email adress to work as a link. If I wrap it in an <a> tag then the JS splits it into another element.

www.theartificialasylum.com/adex(mix_up).html

If you look at the drop down on the right, when you hover over "Contact", you will hopefully see what I mean.

If you need source code please let me know, any help would be greatly appreciated!

This is my first real adventure into web development, I can understand the javascript but it would take forever to get my head round.

html:

<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a" style="z-index:9000;"">
<a   href="artwork/nightclub_portraiture.html"><pre>NightClub Portraiture</pre></a>
<a href="artwork/wedding_photos.html"><pre>Weddings</pre></a>
<a href="artwork/urban_expo.html"><pre>Urban Expo</pre></a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="bar" style="width: 400px;" >
<a>
<pre><p class="thick">The Artificial Asylum Photography.</p></pre>
<pre>[AKA] Alistair Watt-Crawford.</pre>
<br><br>

<pre><p class="thick">Wedding and Event photography:</p></pre>
<pre>Bookings via: [email protected]</pre>
</a>

</div>


<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 1)
</script>

css:

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid black; 
border-top-width: 8px; 
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:1000;
background-color: white;
width: 200px;
visibility: hidden;
}

.bar {
position:absolute;
top: 0; 
border: 1px solid black; /*THEME CHANGE HERE*/
border-top-width: 8px; 
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:1000;
background-color: white;
width: 200px;
visibility: hidden;
}

.bar a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #000000; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
z-index:9000;
height:200px;
}

.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #000000; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
z-index:9000;
}

Javascript:

//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
        while (parentEl!=null){
            totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
            parentEl=parentEl.offsetParent;
        }
    return totaloffset;
},

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
    if (this.ie || this.firefox)
        this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
        if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
            obj2.parentNode.className="selected"
        obj.visibility="visible"
        }
    else if (e.type=="click")
        obj.visibility="hidden"
},

iecompattest:function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
    if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
        edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
        var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
        if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
            edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
        this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null){ //hide previous menu
        this.dropmenuobj.style.visibility="hidden" //hide menu
        if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
            if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
                this.previousmenuitem.parentNode.className=""
        }
    }
    this.clearhidemenu()
    if (this.ie||this.firefox){
        obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
        obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
        this.dropmenuobj=document.getElementById(dropmenuID)
        this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
        this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
        this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
        this.showhide(this.dropmenuobj.style, e, obj)
        this.dropmenuobj.x=this.getposOffset(obj, "left")
        this.dropmenuobj.y=this.getposOffset(obj, "top")
        this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
        this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
        this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
        this.positionshim() //call iframe shim function
    }
},

contains_firefox:function(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
        return true;
    return false;
},

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
    var evtobj=window.event? window.event : e
    if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
        this.delayhidemenu(obj2)
    else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
        this.delayhidemenu(obj2)
},

delayhidemenu:function(obj2){
    this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

positionshim:function(){ //display iframe shim function
    if (this.enableiframeshim && typeof this.shimobject!="undefined"){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
            this.shimobject.style.left=this.dropmenuobj.style.left
            this.shimobject.style.top=this.dropmenuobj.style.top
        }
    this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
    }
},

hideshim:function(){
    if (this.enableiframeshim && typeof this.shimobject!="undefined")
        this.shimobject.style.display='none'
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)
},

init:function(menuid, dselected){
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    var menuitems=document.getElementById(menuid).getElementsByTagName("a")
    for (var i=0; i<menuitems.length; i++){
        if (menuitems[i].getAttribute("rel")){
            var relvalue=menuitems[i].getAttribute("rel")
            document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
            menuitems[i].onmouseover=function(e){
                var event=typeof e!="undefined"? e : window.event
                tabdropdown.dropit(this, event, this.getAttribute("rel"))
            }
        }
        if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
            menuitems[i].parentNode.className+=" selected default"
            var setalready=true
        }
        else if (parseInt(dselected)==i)
            menuitems[i].parentNode.className+=" selected default"
    }
}

}

Answer 1

From looking at the menu code, it looks to me like if the <a> tag doesn't have a rel attribute, the link isn't turned into a drop-down. You should be able to just put the contact link in without a rel tag.

If this suggestion isn't working for you, then please show us exactly what HTML you're trying to use that doesn't work for you (ideally in a working/non-working example).

Answer 2

If I have understood right your question, you can't create more than one tab. Or was it removed, because you couldn't get it work?

The code below is copied from your page, with some changes.

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]);
tabdropdown.init("colortab", "auto");
tabdropdown.init("your_second_tab", "auto");
</script>

Add then the DIV like dropmenu1_a, which contains links in "Contact".