Drop Down Menu foramtting. Need Help

sheed · Sep 16, 2005

I need some help witht he following drop down menu. How can I hide all the DOT's from in front Link 3a,Link 3b etc. I don't want to show the dots but just the text i.e.

Code:

. Link 3a 
. Link 3b 
. Menu 2 
    . Link 2a 
    . Link 2b 
    . Link 2c

and rather want to show as:

Code:

 Link 3b 
 Menu 2 
     Link 2a 
     Link 2b 
     Link 2c

Also after Menu 3 there's too much space i.e.

Code:

Menu 3


 Link 3b 
 Menu 2 
     Link 2a 
     Link 2b 
     Link 2c

and would rather like to show as:

Code:

Menu 3
 Link 3b 
 Menu 2 
     Link 2a 
     Link 2b 
     Link 2c

Any help is really appreciated. Here is the full code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
<!--
	a:hover{color:blue}
	a{text-decoration:none}
	.look{font:bold 16pt Garamond,Arial;}
	.look2{font:bold 12pt Garamond,Arial;}
	.folding{cursor:hand}
	a:active{color:red}
//-->
</style>

<script language="JavaScript">
<!--
	img1=new Image()
	img1.src="fold.gif"
	img2=new Image()
	img2.src="open.gif"
	ns6_index=0

	function change(e)
	{
		if(!document.all&&!document.getElementById)
		return

		if (!document.all&&document.getElementById)
		ns6_index=1

		var source=document.getElementById&&!document.all? e.target:event.srcElement
		if (source.className=="folding")
		{
			var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
			if (source2[2+ns6_index].style.display=="none")
			{
				source2[0].src="open.gif"
				source2[2+ns6_index].style.display=''
			}
			else
			{
				source2[0].src="fold.gif"
				source2[2+ns6_index].style.display="none"
			}
		}
	}
	document.onclick=change
	//-->
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<div class="look"><img src="fold.gif" class="folding">&nbsp;<a href="[URL unfurl="true"]www.google.com">Menu[/URL] 3</a>
<ul class="look2" style="list-style-image:url(list.gif);display:show">
    <li><a href="fdddf">Link 3a</a></li>
    <li><a href="fdddf">Link 3b</a></li>
    <li><div class="look"><img src="fold.gif" class="folding">&nbsp;<a href="#">Menu 2</a>
<ul class="look2" style="list-style-image:url(list.gif);display:none">
    <li><a href="fdddf">Link 2a</a></li>
    <li><a href="fdddf">Link 2b</a></li>
    <li><a href="fdddf">Link 2c</a></li>
</ul>
</div>
</li>
</ul>
</div>
</BODY>
</HTML>

I tried in css but to no avail, any help is really appreciated. Thanks

Vragabond · Sep 16, 2005

Inline you're setting [tt]list-style-type[/tt] to image. Even if you do put anything in the head portion of stylesheet or separate stylesheet, that inline declaration will rule it out. So I suggest you first remove that one and then put in your css something like

Code:

.look2 li {
  list-style-type: none;
}

As for the gap, I cannot tell you more than the fact that [tt]display: show;[/tt] is not a valid value for display property. Still, that does not entirely explain the gap, but you should change it to display: block;. If you do want to bring that ul element closer to Menu3 look into margin-top property for that ul. If zeroed out, it should reside right below the Menu3.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Drop Down Menu foramtting. Need Help

sheed

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor