...

View Full Version : CSS Drop-down menu hierarchy problems



johnmerlino
10-30-2009, 03:31 PM
For some reason, I can't get the list of items to display directly under the head list. It's always pushed to the right a little no matter what CSS I apply. Does anyone have any suggestions as to how I can put the list of items directly underneath the respective parent link. Thanks for any suggestions:

<script type="text/javascript">
<!--
window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = retFalse;
allLinks[i].onmouseover = toggleMenu;
}
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

document.getElementById(thisMenuName).style.display = "block";

this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}

function retFalse() {
return false;
}

-->
</script>

<style type="text/css">
<!--
.m1 {
float:left;
background:gray;
padding-right: 3px;
margin-right: 3px;
}

ul.menu {
display:none;
list-style-type:none;
margin-top:5px;
}
.bullet {
list-style-type:none;
margin:0px;
padding:0px;
width:3em;

}


.m1 li {
position:relative;

}

.m1 ul ul {
position:absolute;
top: 12px;
left: -10%;
z-index: ;
}

-->
</style>

<body>

<div class="m1">
<ul class="bullet">
<li class="inline"><a href="menu1.html" class="menuLink"><span>Add</span></a>
<div class="hidden-menu"
<ul class="menu" id="menu1">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</div>
</li>
</ul>
</div>

<div class="m1">
<ul class="bullet">
<li class="inline"><a href="menu2.html" class="menuLink"><span>Tools</span></a>
<div class="hidden-menu"
<ul class="menu" id="menu2">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</div>
</li>
</ul>
</div>

</body>

abduraooft
10-30-2009, 04:22 PM
http://www.htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the making of dropdown menus.

johnmerlino
10-30-2009, 10:45 PM
Thanks for the link. One of the problems I'm having now is even when I am able to place the list directly below using this:
.m1 li {
position:relative;

}

.m1 ul ul {
position:absolute;
top: 12px;
left: -2em;
}

I still have a problem, where I can't apply a vertical gray bar (using background property andd div) that stretches across the screen. If I create a div and apply overflow:auto, then the list won't display when you mouse over, and if I apply margin to the right most list item, then they will no long display horizontally, rather they will be stacked. So it's like a no win situation for me. I can't figure out how to have the two dropdown menus display in a vertical navigation bar. Thanks for any help.

rnd me
10-30-2009, 10:51 PM
ul, li { margin:0; padding:0;}
at the top of the style tag certainly helped a lot...

I can't get to your menu items without a using mouse though; you might want to address that.

johnmerlino
10-31-2009, 01:54 AM
Hey, thanks for help. A big problem I'm having with this is that I want to wrap these dropdown menus in a div with a background color so that it will appear that these menus are in a navigation bar that spans horizontally. The problem is when I create a "wrapper" div, the div prevents the list items from being displayed when user hovers mouse over menu. There must be a way where these menu items can be nested inside a horizontal navigation bar div. I see this effect on so many web pages, where they have a horizontal menu bar in the masthead with a dropdown menu when users hover over links. Thanks for any help.

abduraooft
10-31-2009, 08:00 AM
Hey, thanks for help. A big problem I'm having with this is that I want to wrap these dropdown menus in a div with a background color so that it will appear that these menus are in a navigation bar that spans horizontally. The problem is when I create a "wrapper" div, the div prevents the list items from being displayed when user hovers mouse over menu. There must be a way where these menu items can be nested inside a horizontal navigation bar div. I see this effect on so many web pages, where they have a horizontal menu bar in the masthead with a dropdown menu when users hover over links. Thanks for any help.
Could you please post a link to your page and explain the issue on the basis of that?

johnmerlino
10-31-2009, 03:01 PM
Here's a link:
file:///C:/Users/admin/Desktop/masthead/New%20Folder/dropdownmenu.html
I added padding to the right div, which is wrapping around the right link "Tools". The problem is since it's floating left, when you resize browser, it drops below. If I put a container div, and wrap it around both links, the one on left and the one on right, then when you hover over either of the links, it will not display the dropdown menu. And as someone else stated, for some reason, in IE 8 when you mouse over dropdown it disappears. But it remains in Firefox.

abduraooft
10-31-2009, 03:32 PM
Here's a link:
file:///C:/Users/admin/Desktop/masthead/New%20Folder/dropdownmenu.htmlThat's your local file :) Just upload it to a public host, there are a lot of free hosts like freehostia.com.

Or at leats post your current code and use
][/COLOR] tags to wrap your code while posting here

johnmerlino
11-02-2009, 09:11 PM
Here is the code. For some reason, it looks horrible in IE8, and for some reason when I try to wrap a container div to give the appearance of a navigation bar, when you hover over link, it will no longer drop down.




<script type="text/javascript">
<!--
window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = retFalse;
allLinks[i].onmouseover = toggleMenu;
}
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

document.getElementById(thisMenuName).style.display = "block";

this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}

function retFalse() {
return false;
}

-->
</script>

<style type="text/css">
<!--
ul, li {
margin:0; padding:0;
list-style:none;

}


ul.menu {
display:none;
list-style-type:none;
margin-top:9px;
width:5em;
}

ul.menu li {
padding:3px;
}

ul.menu li:hover {
background-color:#555353;
}

div li {
position:relative;

}

div ul ul {
position:absolute;
top: 11px;
left:-2px;
z-index:"";
background-color: #a7a4a4;
padding-left:"";
text-align:left;
font-weight:normal;
}

.m1, .m2 {
margin-bottom: 10px;
width: 5em;
background-color: #a7a4a4;
float:left;
padding:2px;
background-image:url(icon1.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:1% 2%;
padding-left:"";
text-align:center;
font-weight:bold;

}

.m1 a, .m2 a {
text-decoration:none;
color:#ffffff;
}

#last {
padding-right:500px;
}

.m2 {

background-image:url(icon2.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:9% 2%;

}



}

-->
</style>

<body>

<div class="m1">
<ul>
<li class="list1"><a href="menu1.html" class="menuLink"><span>Add</span></a>
<ul class="menu" id="menu1">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</li>
</ul>
</div>

<div class="m2" id="last">
<ul>
<li class="list2"><a href="menu2.html" class="menuLink"><span>Tools</span></a>
<ul class="menu" id="menu2">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</li>
</ul>
</div>

<div style="clear:both;">
<h1>main content area</h1>
</div>

</body>

abduraooft
11-03-2009, 07:15 AM
<div class="m1">
<ul>
<li class="list1"><a href="menu1.html" class="menuLink"><span>Add</span></a>
<ul class="menu" id="menu1">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</li>
</ul>
</div>

<div class="m2" id="last">
<ul>
<li class="list2"><a href="menu2.html" class="menuLink"><span>Tools</span></a>
<ul class="menu" id="menu2">
<li><a href="#"><span>Page</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Book</span></a></li>
<li><a href="#"><span>Diagram</span></a></li>
<li><a href="#"><span>Comment</span></a></li>
<li><a href="#"><span>Attachment</span></a></li>
</ul>
</li>
</ul>
</div>Again, your nesting is not correct. Have you checked the link in my first post?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum