www.webdeveloper.com
+ Reply to Thread
Results 1 to 2 of 2
  1. 07-13-2006 04:18 AM #1
    insy09
    insy09 is offline Registered User
    Join Date
    Jan 2006
    Posts
    14

    resolved [RESOLVED] css drop down menu to side prob?

    Hi

    I have a problem with this drop down menu appearing to the right hand side of my <a> tag in the list. I would like it to appear underneath the item.

    So 'link 1-4' would appear directly below 'about us'.

    Please could someone help i havent a clue whats wrong here arrrgghh
    Or point me in the right direction.


    http://212.50.173.21/drop_prob.gif

    Code:
    <script type="text/javascript" >

startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("dmenu");
		for (i=0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload=startList;
//-->

  
</script>

<style>


.topmenuul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.topmenuli{
	list-style-type:none;
	float:left;
}

.topmenutitle{
	display:block;
	width:auto;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
}
.submenuli
{height:20px;
	width:100px;
	}
.submenuli a{
	display:block;
	width:100px;
	
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
#dmenu {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:8pt;
height: 20px;
		margin: 0;
		padding-left: 10px;
		background: url(images/tab_bottom.gif) repeat-x bottom;

}
/* menu design */

#dmenu {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size:8pt;
}

.topmenuul {
	
}

.topmenuli a:link,.topmenuli a:visited
	{
		float: left;
		background: #CCEEF9;
		font-size: 8pt;
		line-height: 14px;
		text-decoration: none;
		padding: 2px 10px 2px 10px;
		margin-right: 4px;
		border: 1px solid #0FBDF3;
		color: #000000;
		display:block;
	
	
	}

.topmenutitle {
	text-indent:3px;
	text-decoration: none;
	border:1px solid #000000;
	padding:3px;
	line-height:14px;
}

.submenuul {
	margin-top:-1px;
	background-color:#E7F7FF;
	background-position:left bottom;
	background-repeat: repeat-x;
	border:0;

}

.submenuli a{
	padding:3px;
	text-decoration: none;
	color: #000000;

}

.submenuli a:hover{
	text-decoration: none;
	background:#336699;
	color: #FFFFFF;
}


</style>


<body>
<div id="menu">
<ul class="topmenu" id="dmenu">
	<li class="topmenuli">
	<a href="#" class="topmenutitle">about us</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul>

	</li>
	<li class="topmenuli"><a href="#">our business</a></li>
	<li class="topmenuli"><a href="#">investor relations</a></li>
	<li class="topmenuli"><a href="#">media centre</a></li>
	<li class="topmenuli"><a href="#">career opportunities</a></li>
</ul>
</div>
</body>
    Reply With Quote Reply With Quote
  2. 07-13-2006 07:35 AM #2
    insy09
    insy09 is offline Registered User
    Join Date
    Jan 2006
    Posts
    14
    I added a margin-top and margin-left to the class .submenuul to display items below the list. This works fine on 'about us' but because its absolute it the other items arent lined up correctly.

    Is there a way of lining these up so they will appear to the left and below regardless of the item hovered over?

    Thanks

    Code:
    <script type="text/javascript" >

startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("dmenu");
		for (i=0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload=startList;
//-->

  
</script>



<style>


.topmenuul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.topmenuli{
	list-style-type:none;
	float:left;
}

.topmenutitle{
	display:block;
	width:auto;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
	margin-top:20px;
	margin-left:-78px;
}
.submenuli
{height:20px;
	width:100px;
	margin-top:-1px;
	}
.submenuli a{
	display:block;
	width:100px;
	
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
#dmenu {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:8pt;
height: 20px;
		margin: 0;
		padding-left: 10px;
		background: url(images/tab_bottom.gif) repeat-x bottom;

}
/* menu design */

#dmenu {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size:8pt;
}

.topmenuul {
	
}

.topmenuli a:link,.topmenuli a:visited
	{
		float: left;
		background: #CCEEF9;
		font-size: 8pt;
		line-height: 14px;
		text-decoration: none;
		padding: 2px 10px 2px 10px;
		margin-right: 4px;
		border: 1px solid #0FBDF3;
		color: #000000;
		display:block;
	
	
	}

.topmenutitle {
	text-indent:3px;
	text-decoration: none;
	border:1px solid #000000;
	padding:3px;
	line-height:14px;
}

.submenuul {
	
	background-color:#E7F7FF;
	background-position:left bottom;
	background-repeat: repeat-x;
	border:0;
	

}

.submenuli a{
	padding:3px;
	text-decoration: none;
	color: #000000;

}

.submenuli a:hover{
	text-decoration: none;
	background:#336699;
	color: #FFFFFF;
}
</style>

<div id="menu">
<ul class="topmenu" id="dmenu">
	<li class="topmenuli">
	<a href="#" class="topmenutitle">about us</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul>

	</li>
	<li class="topmenuli"><a href="#">our business</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul>
	</li>
	<li class="topmenuli"><a href="#">investor relations</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul></li>
	<li class="topmenuli"><a href="#">media centre</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul></li>
	<li class="topmenuli"><a href="#">career opportunities</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">link 1</a></li>
		<li class="submenuli"><a href="">link 2</a></li>
		<li class="submenuli"><a href="">link 3</a></li>
		<li class="submenuli"><a href="">link 4</a></li>
	</ul>
	</li>
</ul>
</div>
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles