Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    CSS Drop-down menu hierarchy problems

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    http://www.htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the making of dropdown menus.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    johnmerlino (10-30-2009)

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Code:
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    johnmerlino (10-31-2009)

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by johnmerlino View Post
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here's a link:
    file:///C:/Users/admin/Desktop/masthead/New%20Folder/dropdownmenu.html
    That'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 [CODE][/CODE] tags to wrap your code while posting here
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

    Code:
    <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>

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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