SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Trying to Make My 2nd Sublist Appear on Drop Down Menu

    Hello everyone,

    I'm designing a drop down menu in html & css, and I'm running into a problem in that I'm trying to make the 2nd sublist appear when the mouse hovers over the link item. This menu is designed at each level specially so it looks how I want it to.

    html lists and sublists:
    Code:
    <div id="personalMenuWrapper">
    <div id="navMenu">
    <ul>
    	<li><div id="textalign">health</div>
        	<ul>
              <li><div id="subMenu1">skin care</div>
              	<ul>
                	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                  	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                </ul>
              </li>
              <li><div id="subMenu1">weight loss</div>
              	<ul>
                	<li><div id="subMenu2">fitness</div>
                    	<ul>
                        	<li><a href="#">under construction</a></li>
                            <li><a href="#">under construction</a></li>
                        </ul>
                    </li>
                	<li><div id="subMenu2">dieting</div>
                    	<ul>
                        	<li>under construction</li>
                            <li>under construction</li>
                        </ul>
                    </li>
               </ul>
          </ul>
          </li>
    </ul>
    <ul>
    	<li><div id="textalign">insurance</div>
    		<ul>
      			<li><div id="subMenu1">health insurance</div>
                	<ul>
                    	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                        <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    </ul>
                </li>
      			<li><div id="subMenu1">auto insurance</div>
                	<ul>
                    	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                        <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    </ul>
                </li>
      			<li><div id="subMenu1">home insurance</div>
                	<ul>
                    	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                        <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    </ul>
                </li>
      			<li><div id="subMenu1">annuities</div>
                	<ul>
                    	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                        <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    </ul>
                </li>
    		</ul>
        </li>
    </ul>
    <ul>
          <li><div id="textalign">shopping</div>
            <ul>
              <li><div id="subMenu1">electronics</div>
                <ul>
                  <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                  <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                </ul>
              </li>
              <li><div id="subMenu1">fashion</div>
              	<ul>
              	  <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                  <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                </ul>
              </li>
              <li><div id="subMenu1">food & dining</div>
              	<ul>
                	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                </ul>
              </li>
              <li><div id="subMenu1">cars/auto</div>
              	<ul>
                	<li><div id="subMenu2"><a href="#">under construction</a></div></li>
                    <li><div id="subMenu2"><a href="#">under construction</a></div></li>
                </ul>
              </li>
            </ul>
          </li>
    </ul>
    <ul>
          <li><div id="textalign">dating</div>
          	<ul>
          		<li style="width:160px;"><div id="subMenu1" style="padding-left:2px; padding-top:0px;"><a style="width:140px; text-align:left; color:#903; height:20px; width:115px; font-family:'Script MT Bold'; font-size:20px;" href="#"><b>RealMatureSingles</b></a></div></li>
                <li style="width:160px;"><div id="subMenu1" style="width:160px; padding-left:0px;"><a href="#" style="font-family:'Courier New', Courier, monospace; font-size:16px;">SeniorPeopleMeet</a></div></li>
        	</ul>
          </li>
    </ul>
    <ul>
       	  <li><div id="textalign">education</div>
          	<ul>
            	<li><div id="subMenu1"><a href="#">under construction</a></div></li>
                <li><div id="subMenu1"><a href="#">under construction</a></div></li>
           </ul>
           </li>
    </ul>
    </ul>
    </div>
    </div>
    css styling:
    Code:
    /********************/
    /*PERSONAL NAVIGATION MENU*/
    /********************/
    
    /*begin wrapper and align divs for menu*/
    #textalign{
    	vertical-align:middle;
    	text-align:center;
    	width:100px;
    	height:20px;
    	text-shadow:1px 1px 1px #000;
    	padding-top:10px;
    }
    #personalMenuWrapper{
    	vertical-align:top;
    	padding-bottom:450px;
    }
    /*end wrapper and align divs*/
    
    /*begin main list*/
    #navMenu{
    	padding:0px;
    	margin:0px;
    }
    #navMenu ul{
    	list-style:none;
    }
    #navMenu ul li{
    	position:relative;
    	float:left;
    	padding-right:1px;
    	background:#900;
    	margin-left:10px;
    	text-align:center;
    	list-style:none;
    	border:3px solid #4F0E02;
    	color:#FFF;
    	width:100px;
    	height:40px;
    	display:table-cell;
    	padding-bottom:1px;
    }
    #navMenu ul li:hover{
    	background:#C00;
    	border:3px solid #900;
    	color:#F93;
    	text-shadow:1px 1px 1px #000;
    	list-style:none;
    }
    #navMenu ul:hover ul{
    	display:inline-table;
    	float:none;
    	visibility:visible;
    }
    /*end main list*/
    
    /*begin first sublist*/
    #subMenu1{
    	text-align:left;
    	padding-left:3px;
    	padding-top:3px;
    	vertical-align:middle;
    	height:15px;
    	width:115px;
    }
    #navMenu ul ul{
    	display:none;
    }
    #navMenu ul ul li{
    	width:125px;
    	height:25px;
    	list-style:none;
    	background:#CCC;
    	text-shadow:1px 1px 1px #000;
    	font-size:14px;
    	border:2px ridge #333;
    	color:#000;
    	text-align:left;
    	padding-left:3px;
    	position:relative;
    	top:14px;
    	left:-53px;
    }
    #navMenu ul ul a{
    	text-decoration:none;
    	font-size:9px;
    	color:#000;
    	text-shadow:1px 1px 1px #000;
    	font-family:Verdana, Geneva, sans-serif;
    }
    #navMenu ul ul li:hover{
    	background:#999;
    	color:#000;
    	text-decoration:blink;
    	border:2px inset #1B1B1B;
    }
    #navMenu ul ul:hover ul{
    	display:table-cell;
    	float:right;
    	visibility:visible;
    }
    /*end first sublist*/
    
    /*begin second sublist*/
    #subMenu2{
    	width:145px;
    	height:12px;
    	vertical-align:center;
    	text-align:left;
    	padding-left:1px;
    	font-size:10px;
    }
    #navMenu ul ul ul li{
    	width:145px;
    	height:20px;
    	list-style:none;
    	background:#999;
    	color:#000;
    	text-shadow:1px 1px 1px #000;
    	text-align:left;
    	padding-left:1px;
    	border:2px ridge #333;
    	position:relative;
    }
    #navMenu ul ul ul li:hover{
    	background:#666;
    	color:#000;
    	text-decoration:blink;
    	border:2px inset #1A1A1A;
    }
    #navMenu ul ul ul a{
    	text-decoration:none;
    	font-size:9px;
    	color:#000217;
    	text-shadow:1px 2px 1px #000;
    	font-family:Verdana, Geneva, sans-serif;
    }
    #navMenu ul ul ul:hover ul{
    	display:inline-table;
    	float:right;
    	visibility:visible;
    }
    /*end second sublist*/
    
    /*begin third sublist*/
    #navMenu ul ul ul ul{
    	visibility:hidden;
    	display:none;
    }
    /*end third sublist*/
    
    /* Contains the Float */
    
    .clearFloat{
        clear:both; 
        margin:0;
        padding:0;
    }
    
    /* IE7 Display Fix */
    
    #navMenu #holder ul li { 
      display: inline; 
    }

  2. #2
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi etidd,

    I'm not sure why you have divs inside your <li>'s? if you are trying to apply an ID or Class, just add it right to the <ul> or <li>. Seems to me that could get real busy and confusing fast.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    in dreamweaver, vertical-align:center; and other attributes weren't centering text within the blocks, so i put divs in each sublist to center text.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    can i add more than one id to the <ul>'s and <li>'s?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are making that way too complicated and there's no need to reinvent the wheel as these types of menus are well documented. There are too many non semantic divs and too many unnecessary nestings.

    You also seem to be excluding IE7 and under with the display:table properties you are using.

    Your main problem is that when you show a nested sublist then you also have to hide the sub sub list because that will also show if you don't hide it.

    e.g.

    Code:
    #navMenu ul:hover ul {
        display:inline-table;
        float:none;
        visibility:visible;
    }
    #navMenu ul:hover ul ul{visibility:hidden}
    
    #navMenu ul ul:hover ul {
        position:absolute;
        left:100%;
        visibility:visible;
        z-index:99
    }
    #navMenu ul ul:hover ul ul{visibility:hidden}
    However, I think you should start again with a simpler more standard structure and use absolute positioning for the drop down menus as in this example.

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies.


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
  •