CSS help, postioning menu.

[Kudos Veteran]

http://www.joncremin.com/o2/

I'm trying to get the menu sub items to line up directly beneath the main menu items and also trying to get the search box to push down to make space for the subnav. I hope i've explained that well enough, i've tried four different menu styles and have come to a dead end on each of them, this is the closest i've gotten so far. Yes this is for work, but i'm only an intern and was hired to code, not for design. It's been wrecking my head since yesterday so any help is appreciated.

/k

[ninjagowoowoo]

Try this script (from dynamicdrive.com) I use it and it works....

<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;
}

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

</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">JavaScriptlt;/a>'
menu1[1]='&lt;a href="http://www.freewarejava.com">Freewarejava.com</a>nu1[2]='&lt;a href="http://codingforums.com">Codingms&lt;/a&gt;'
menu1[3]='&lt;a href="http://www.cssdrive.com">CSSe&lt;/a&gt;'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='&lt;a href="http://cnn.com">CNN</a>nu2[1]='&lt;a href="http://msnbc.com">MSNBC</a>nu2[2]='&lt;a href="http://news.bbc.co.uk">BBC&lt;/a&gt;'

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&amp;&amp;!document.all

if (ie4||ns6)
document.write('<div"dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"&gt;&lt;/div&gt;')

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=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" &amp;&amp; obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

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

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 &amp;&amp; !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x &lt; dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 &amp;&amp; !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 &amp;&amp; !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y &lt; 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&amp;&amp;!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&amp;&amp;e.currentTarget!= e.relatedTarget&amp;&amp; !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

&lt;/script&gt;

and then for your links in the nav, use this code:

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

[Kudos Veteran]

Thanks i'll give it a go monday.

/k

[primexx]

Javascript menus are horrible, use this:

http://www.alistapart.com/articles/dropdowns/

[Night.Hawk]

Yeah, if they don't have JavaScript enabled (and there are people that don't) then you'd be screwed. Go with the link primexx posted.

[bslag.xj]

Using the JavaScript one is just bloating up the page, use the A List Apart link.

[Kudos Veteran]

The client gets what the client wants, i already had the alistapart one working last week and they didn't like it. It's internal software and they all use IE with javascript on anyway.

/k