SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Drop down Menu

    Hi,

    Im trying to create a three tier drop down menu which runs left to right (horizontal) as shown below and when u access the next tier it moves down in a list format and the same would apply to the third tier.



    My current html for the navigation is

    HTML Code:
    <div id="nav">
     <div id="left"> </div>
            
       <ul>
    	<li>Home</li>
    	<li>About us</li>
            <li>Occasions
    					
    		<ul class="1stindentul"> 
    		    <li>Birthdays</li> 
    		    <li>Weddings</li> 
    		    <li>Birth Announcements</li> 
    		    <li>Calendar Events 
    
    			<ul class="2ndindentul">  
    				  <li>Valentines</li>
    				  <li>Easter</li> 
    				  <li>Christmas</li>
    				  <li>Halloween</li> 
    			 </ul> 
    
    		   </li>
    
    		   <li>Prom Nights</li>
    		   <li>fund Raising</li>
    	         </ul>
    	<li>Corporate</li>
    	<li>Inspire</li>
    	<li>Contact</li>
         </ul>
    		
       <div id="right"> </div>
    		
    </div>
    the css is

    Code CSS:
    div#nav {background-color: #FFFFFF; width: 820px;	padding: 0 15px;	float: left; clear;}
     
    div#nav #left { background: url(../img/nav_left.png) no-repeat;	width: 10px; height: 40px; float: left;}
     
    div#nav #right {background: url(../img/nav_right.png) no-repeat; width: 10px; height: 40px;	float: right;}
     
    div#nav ul {background-color: #392d29;	 width: 800px; height: 40px;float: left; margin: 0; padding: 0;}
     
    div#nav ul li {display: inline; list-style-type: none; padding: 0; border-right: 1px solid #251f1c; border-left: 1px solid #463c39;}
     
    div#nav li a {font-size: 12px; font-weight: bold; color: #FFFFFF;	float: left; padding: 11px 15px 11px 15px;}
     
    div#nav ul li a:hover, div#nav ul li a.selected {background-color: #473833;}
     
    div#nav ul li #left-tab {border-left: 0;}
     
    div#nav ul li #right-tab {border-right: 0;}
     
    div#nav ul ul{width:149px; position:absolute; bottom:-40px; left:-93px;}
     
    div#nav ul ul ul{width:149px; position:absolute; bottom:-40px; left:10px; display:block;}

    Am i able to achieve this affect with css?

  2. #2
    SitePoint Evangelist jonbey's Avatar
    Join Date
    May 2007
    Posts
    507
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think that you can, but I do not know how. But, I would suggest leaving it as it is. Large menus do look a bit messy, and you may find a solution that works well in one browser but not others. I have used some of Stu Nicholls' stuff in the past, but I prefer the dropline approach as it just looks neater.

    Lots of code here, probably a solution somewhere: http://www.cssplay.co.uk/menus/

  3. #3
    SitePoint Evangelist jonbey's Avatar
    Join Date
    May 2007
    Posts
    507
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arrggh - whilst Stu's illegal nested table dropdown menu works and is interesting, I wouldn't recommend it for general use. Have a read of this article.

  5. #5
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that.. managed to implement it.. take a look

    http://www.swaray.co.uk/Choc_bars_Website/index.php

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't work in IE6 ..... not sure why as yet (I did mention above that this system uses messy code, which makes it a bit more difficult to debug).

    .nav also needs to be floated left so that the right edge image lines up.

  7. #7
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on the home page the menu falls behind the main content banner in i.e 7 is there a way of placing it above?

    I tried using the z:index on the nav div and placed it above the content banner div but no luck..


  8. #8
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the navigation seems to work in i.e 7 on every page apart from the occasion pages... i.e birthdays.php, valentines.php

    the content is also left aligned on the occasion pages but not on the others??!

    Website example

    I have copied the code exactly from the working pages but it does not work... arrrrghhh Im losing the will to live..

    any suggestions?

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The #navigation div needs the z-index, plus relative position to make z-index work.

    The #search div also needs a width of 418px set so that it does not drop below the logo image in FF2.

    The pages that don't centre have extra space with a tab character before the doctype, dropping the page into quirks mode.

  10. #10
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great... I would of spent hours trying to figure that out... what do you mean when it goes into quirks mode?

    The search div is not showing floated to the right is there something im missing ?

    the right curve for the navigation is dropping below the navigation itself its currently floated to the right... when it floats to the left it just appears on the left underneath.. what am i doing wrong?

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Owz2004 View Post
    what do you mean when it goes into quirks mode?
    When IE either doesn't see a valid doctype, or sees something before the doctype, it goes into "quirks" mode instead of standards mode, where it tries to emulate the way the very old versions of IE rendered (incorrectly).

    Quote Originally Posted by Owz2004 View Post
    The search div is not showing floated to the right is there something im missing ?
    Both the labels and h1 in the search area are floated left, so they push the width of the right float out - just pick a width for #search that gives the display you want (or float the labels and h1 right).

    Quote Originally Posted by Owz2004 View Post
    the right curve for the navigation is dropping below the navigation itself its currently floated to the right... when it floats to the left it just appears on the left underneath.. what am i doing wrong?
    The .nav <ul> itself should be floated left, and needs to be a fraction wider to close the gap - I thought this was mentioned somewhere before.

  12. #12
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks very much for your help.. they are all working now.

    thank you

    O


Tags for this Thread

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
  •