Jump to content

By default my drop down menu is taking blue color and i want it to be black


anushka

Recommended Posts

hii

i am not using the blue color ,but its taking blue color in drop down menu

i want it to be balck color Can any one help please

 

<html>

<head>

 

<style type="text/css">

 

#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px Verdana;

font_color:#191919;

line-height:18px;

z-index:100;

}

 

#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

}

 

#dropmenudiv a:hover{ /*hover background color*/

background-color: yellow;

font_color:#191919;

}

 

</style>

<script type="text/javascript">

 

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

 

 

 

 

//Contents for menu 1

 

var menu1=new Array()

menu1[0]=  '<a href="http://www.javascriptkit.com">Ashok</a><br>'

menu1[1]='<a href="http://www.freewarejava.com">Ashok1</a><br>'

menu1[2]='<a href="http://codingforums.com">Ashok2</a><br>'

menu1[3]='<a href="http://www.cssdrive.com">Ashok3</a><br>'

menu1[4]='<a href="http://www.javascriptkit.com">Ashok4</a><br>'

menu1[5]='<a href="http://www.freewarejava.com">Ashok5</a><br>'

menu1[6]='<a href="http://codingforums.com">Ashok6</a><br>'

menu1[7]='<a href="http://www.cssdrive.com">Ashok7</a><br>'

 

 

//Contents for menu 2, and so on

var menu2=new Array()

menu2[0]='<a href="http://cnn.com">CNN</a><br>'

menu2[1]='<a href="http://msnbc.com">MSNBC</a><br>'

menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a><br>'

menu2[3]='<a href="http://cnn.com">CNN</a><br>'

menu2[4]='<a href="http://msnbc.com">MSNBC</a><br>'

menu2[5]='<a href="http://news.bbc.co.uk">BBC News1</a><br>'

 

var menuwidth='165px' //default menu width

var menubgcolor='lightyellow'  //menu bgcolor

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?

 

/////No further editting needed

 

var ie4=document.all

var ns6=document.getElementById&&!document.all

 

if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

 

function getposOffset(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;

}

 

 

function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}

 

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

 

function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}

 

function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}

 

 

function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)

 

if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

 

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}

 

return clickreturnvalue()

}

 

function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}

 

function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

 

function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}

 

function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}

 

function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}

 

function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}

 

if (hidemenu_onclick=="yes")

document.onclick=hidemenu

 

</script>

</head>

<body>

 

<div id="tooltip" style="bottom::relative;visibility:hidden;border:0px solid white;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow;padding:1px"></div>

 

<a href="default1.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Check dis</a>

 

<a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">News Sites</a>

 

</body>

Link to comment
Share on other sites

are you talking about the links? if so; here is the complete css you need:

 

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color: #000000;
}

#dropmenudiv a:link {
color: #000000;
}

#dropmenudiv a:visited {
color: #000000;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
color: #000000;
}

#dropmenudiv a:active {
color: #000000;
}

</style>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.