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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    css multilevel menu help

    hi i am trying to create a menu for a website i am working on and am running into some problems along the way

    here is the code
    Code:
    <style type="text/css">
        .menubar, .lvl2, .lvl3
        {
          padding: 0;
          margin: 0;
          cursor:pointer;
          list-style-type: none;
        }
        .menubar li {
        	background: #cccccc;
        	padding: 0 3px;
        	text-align:center;
        	float:left;
        	margin-left:7px;
        }
        .lvl2 {
        	display: none;
        	position:relative;
        	float:left;
        }
        .lvl3 {
        	display:none;
        	position:relative;
        	float:right;
        }
         .lvl2 li {
        	background: #000000;
        	padding: 0 3px;
        	text-align:left;
        	float:none;
        }
        .lvl3 li {
        	background: #000000;
        	padding: 0 3px;
        	text-align:left;
        	float:none;
        } 
        .menubar li a{
        	font-family:veranda,arial,helvetica;
        	font-size:12px;
        	font-weight:bolder;
        	text-decoration:none;
        	color:#FFF;
        }
        .lvl2 li a{
        	font-family:veranda,arial,helvetica;
        	font-size:12px;
        	font-weight:bolder;
        	text-decoration:none;
        	color:#848282;
        }
        .lvl3 li a{
        	font-family:veranda,arial,helvetica;
        	font-size:12px;
        	font-weight:bolder;
        	text-decoration:none;
        	color:#848282;
        }
    	.menubar li:hover {
    		background: #000000;
    	}
    	.menubar li:hover .lvl2 {
    		display:block;
    	}
    	.lvl2 li:hover .lvl3 {
    		background: #000000;
    		display:block;
    	}
    	.lvl2 li:hover {
    		background: #848282;
    	}
    	.lvl3 li:hover {
    		background: #848282;
    	}
    	.lvl2 li:hover a {
    		color: #FFFFFF;
    	}
    	.lvl3 li:hover a {
    		color: #FFFFFF;
    	}
      </style>
      
      <!--[if lte IE 6]>
        <style type="text/css">
          body
          {
            behavior: url('csshover2.htc');
          }
          
          #menubar ul li a
          {
            /*display: inline-block;*/
          }
        </style>
      <![endif]-->
    </head>
    
    <body>
      <p>Below you should see a CSS driven menu bar.</p>
    
      
    						<ul class="menubar">
    							<li><a href="">HOME</a></li>
    						
    							<li><a href="">ABOUT</a>
    								<ul class="lvl2">
    									<li><a href="">History/Timeline</a></li>
    									<li><a href="">Contact Info</a></li>
    									<li><a href="">Quality Policy</a></li>
    								</ul>
    							</li>
    						
    							<li><a href="">PRODUCTS</a>
    								<ul class="lvl2">
    									<li class="sub"><a href="">New Products</a>
    										<ul class="lvl3">
    											<li><a href="">Pricing</a></li>
    											<li><a href="">Specs</a></li>
    											<li><a href="">Get Demo</a></li>
    										</ul>
    									</li>
    									<li><a href="">Used/Company Resale</a></li>
    									<li><a href="">Attachments</a></li>
    									<li><a href="">The See In Action</a></li>
    									<li><a href="">Parts</a></li>
    								</ul>
    							</li>
    						
    							<li><a href="">COMPANY STORE</a></li>
    						
    							<li><a href="">SALES</a>
    								<ul class="lvl2">
    									<li><a href="">Account Mgrs</a></li>
    									<li><a href="">Global Sales & Distribution</a></li>
    									<li><a href="">North American Distributors</a></li>
    									<li><a href="">Industrial Sales & Distribution</a></li>
    								</ul>
    							</li>
    						
    							<li><a href="">SERVICE &AMP; SUPPORT</a>
    								<ul class="lvl2">
    									<li class="sub"><a href="">Parts</a>
    										<ul class="lvl3">
    											<li><a href="">General Info</a></li>
    											<li><a href="">Documents</a></li>
    										</ul>
    									</li>
    									<li class="sub"><a href="">Warranty</a>
    										<ul class="lvl3">
    											<li><a href="">General Info</a></li>
    											<li><a href="">Documents</a></li>
    										</ul>
    									</li>
    									<li><a href="">Sales & Distribution</a></li>
    									<li><a href="">Training</a></li>
    									<li class="sub"><a href="">Distributor Tools</a>
    										<ul class="lvl3">
    											<li><a href="">GPS</a></li>
    											<li><a href="">Company Plus</a></li>
    										</ul>
    									</li>
    								</ul>
    							</li>
    						
    							<li><a href="">COMPANY OWNERS</a>
    								<ul class="lvl2">
    									<li><a href="">Warranty Info</a></li>
    									<li><a href="">E-News Signup</a></li>
    									<li><a href="">Faqs</a></li>
    								</ul>
    						
    							<li><a href="">EMPLOWMENT</a></li>
    						
    							<li><a href="">FAQS</a></li>
    						
    							<li><a href="">CONTACT INFO</a></li>
    						</ul>
    	</body>
    
    </html>
    the problems i am running into, first off i have provided a picture of what the menu should look like.



    problems

    * the first or main level needs to be elastic by the text with a 3px padding on either side, when you hover i do not want it to expand to the width of the sub level menu

    *i want the items in the sub levels to entirely change color when you mouse over them

    *lastly i need to get the third lvl to show to the right of the item selected in the second lvl

    you should note that all the items are to be controlled by the size of the text with 3px padding no set widths

    can anyone please give me some help or guidence with this i am trying everything i can think of with little or no luck.

    thks stickybomb

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    thanks for the link i have been searching for a multi-level version

    now the only thing i have to do is create an ie7 complient version

    thks
    Last edited by stickybomb; 05-22-2007 at 01:09 AM. Reason: fix my problems

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you get it working in Firefox then its likely going to work in IE7. Its IE6 you need to worry about. For that you can use the javascript they give you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks all of my menu problems have been prettywell fixed know i just have a few minor css problems though one being that the style of the second level links is not the same has the thrid level links and they should be. I even tried applying the style directly to eacj level but still no problem

    this is my css i have highlighted the values for the links in red

    Code:
    .nav {
    position:relative;
    float:left;
    top:.2em;
    width:100%;
    }
    
    .nav ul /* settings for all levels */ {
    cursor:pointer;
    float:left;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    .nav ul li {
    height:22px;
    margin:0 0 0 1.4em;
    padding:0 .3em;
    }
    
    .nav ul li h2 {
    margin:0;
    padding:0;
    }
    
    .nav ul ul li,.nav ul ul ul li {
    margin:0;
    }
    
    .nav li {
    position:relative;
    }
    
    .nav ul ul {
    display:none;
    left:0;
    position:absolute;
    top:100%;
    }
    
    .nav ul ul ul {
    display:none;
    left:100%;
    position:absolute;
    top:0;
    }
    
    .nav ul ul li {
    background:#000;
    height:auto;
    padding:.2em .3em;
    text-align:left;
    width:15em;
    }
    
    .nav ul ul ul li {
    background:#000;
    color:silver;
    height:auto;
    padding:.2em .3em;
    text-align:left;
    width:8em;
    }
    
    .nav ul li a,.nav li h2 {
    color:#FFF;
    font-family:veranda,arial,helvetica;
    font-size:12px;
    font-weight:bolder;
    text-decoration:none;
    }
    
    .nav li:hover {
    background:#000;
    }
    
    .nav ul ul li.sub,.nav ul ul li.sub:hover {
    background-image:url("images/sm-Arrow.png");
    background-position:right 50%;
    background-repeat:no-repeat;
    }
    
    .nav li img {
    margin-top:-0.2em;
    }
    
    .nav ul ul ul li a,.nav ul ul li a {
    color:silver;
    font-family:veranda,arial,helvetica;
    font-size:11px;
    font-weight:bolder;
    text-decoration:none;
    }
    
    .nav li:hover .lvl2,.nav ul ul li:hover .lvl3 {
    display:block;
    }
    
    .nav ul ul li:hover,.nav ul ul ul li:hover {
    background:#848282;
    }
    
    .nav ul ul li:hover a,.nav ul ul ul li:hover a {
    color:#FFF;
    }
    here is the html for the list

    Code:
    <div class="nav">
    						<ul class="lvl1">
    							<li><h2><a href="">HOME</a></h2></li>
    						</ul>
    						<ul class="lvl1">
    							<li><h2><a href="">ABOUT</a></h2>
    								<ul class="lvl2">
    									<li><a href="" class="link1">History/Timeline</a></li>
    									<li><a href="" class="link1">Contact Info</a></li>
    									<li><a href="" class="link1">Quality Policy</a></li>
    								</ul>
    							</li>
    						</ul>
    						<ul class="lvl1">
    							<li><h2><a href="">PRODUCTS</a></h2>
    								<ul class="lvl2">
    									<li class="sub"><a href="" class="link1">New Excavators</a>
    										<ul class="lvl3">
    											<li><a href="" class="link2">Pricing</a></li>
    											<li><a href="" class="link2">Specs</a></li>
    											<li><a href="" class="link2">Get Demo</a></li>
    										</ul>
    									</li>
    									<li><a href="" class="link1">Used Excavators</a></li>
    									<li><a href="" class="link1">Attachments</a></li>
    									<li><a href="" class="link1">The Boom In Action</a></li>
    									<li><a href="" class="link1">Parts</a></li>
    								</ul>
    							</li>
    						</ul>
    						<ul class="lvl1">
    							<li><h2><a href="">GRADALL STORE</a></h2></li>
    						</ul>
    						<ul class="lvl1">
    							<li><h2><a href="">SALES</a></h2>
    								<ul class="lvl2">
    									<li><a href="" class="link1">Account Managers</a></li>
    									<li><a href="" class="link1">Global Sales</a></li>
    									<li><a href="" class="link1">North American Sales</a></li>
    									<li><a href="" class="link1">Industrial Machine Sales</a></li>
    								</ul>
    							</li>
    						</ul>
    						<ul class="lvl1">	
    							<li><h2><a href="">SERVICE &amp; SUPPORT</a></h2>
    								<ul class="lvl2">
    									<li class="sub"><a href="" class="link1">Parts</a>
    										<ul class="lvl3">
    											<li><a href="" class="link2">General Info</a></li>
    											<li><a href="" class="link2">Documents</a></li>
    										</ul>
    									</li>
    									<li class="sub"><a href="" class="link1">Warranty</a>
    										<ul class="lvl3">
    											<li><a href="" class="link2">General Info</a></li>
    											<li><a href="" class="link2">Documents</a></li>
    										</ul>
    									</li>
    									<li><a href="" class="link1">Sales &amp; Distribution</a></li>
    									<li><a href="" class="link1">Training</a></li>
    									<li class="sub"><a href="" class="link1">Distributor Tools</a>
    										<ul class="lvl3">
    											<li><a href="" class="link2">GPS</a></li>
    											<li><a href="" class="link2">Gradall Plus</a></li>
    										</ul>
    									</li>
    								</ul>
    							</li>
    						</ul>
    						<ul class="lvl1">	
    							<li><h2><a href="">GRADALL OWNERS</a></h2>
    								<ul class="lvl2">
    									<li><a href="" class="link1">Warranty Info</a></li>
    									<li><a href="" class="link1">E-News Signup</a></li>
    									<li><a href="" class="link1">FAQs</a></li>
    								</ul>
    							</li>
    						</ul>
    						<ul class="lvl1">	
    							<li><h2><a href="">EMPLOYMENT</a></h2></li>
    						</ul>
    						<ul class="lvl1">	
    							<li><h2><a href="">FAQS</a></h2></li>
    						</ul>
    						<ul class="lvl1">
    							<li><h2><a href="">CONTACT INFO</a></h2></li>
    						</ul>
    						<ul class="lvl1">	
    							<li><a href="#"><img src="images/vacall.png" border="0" /></a></li>
    						</ul>
    			</div>
    i can not get the initial state color for the third level to be silver basically also if anyone know a way in css to detect an opperating system since my spacing is different on pc then a mac in all borwsers it would be helpful thks

    sticky

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok now that i have got the menu working with mozilla/IE7 i am attempting to tckle the major challenge of ie6 but i am running into problems. Basically the problem is that it is not showing up horizontall and i have very limited knowledge of browser flaws and fixes. From all i have found in searching and tinkering with the code i have had no results produce it horizontal.

    if you can assist me with this you can view the menu here http://www.3dmonic.com/test

    the menu is based off of the whatever:hover style so all the hovering works, it just displays vertical.

    any help with this would be great

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by stickybomb View Post
    Basically the problem is that it is not showing up horizontall and i have very limited knowledge of browser flaws and fixes.
    But you are feeding IE6 with an additional stylesheet. Here you have this:
    Code:
    .nav ul {
    	display: inline-block;
    	float: none;
    }
    display: inline-block is only supported in IE6 and IE7 for naturally inline elements. This excludes support for display: inline-block for the ul element. Therefore you see no effect of this style in IE.

    What are you trying with the above code?


  •  

    Posting Permissions

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