SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Drop Down third level

    I was wondering if someone could tell me why the third level isnt working properly. The third level is under the Visitor Center ->Meeting Room.

    Here is the html:
    HTML Code:
    <div id="menucolumn">
    <div class="menucolumn_header"></div>
    <div id="mainmenu">
    <ul id="nav"> 
    	 <li><a href="#">Home</a></li> 
    	 <li><a href="#">Letter from the Chair</a></li> 
    	 <li><a href="#">Trustees &amp; Staff</a></li> 
    <li><a href="#">FAQ</a></li>
    	 <li><a href="#">Foundation Grants</a> 
    	 <ul> 
    		 <li><a href="#">General Information</a></li> 
    		 <li><a href="#">Apply for a Grant</a></li> 
    		 <li><a href="#">Present Grants</a></li> 
    		 <li><a href="#">Past Grants</a></li> 
    	 </ul> 
    	 </li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Newsroom</a></li> 
    <li><a href="#">Vistor Center</a>
    	<ul> 
    		 <li><a href="#">General Information</a></li> 
    		 <li><a href="#">Meeting Rooms</a>
    	 <ul>
    	 <li><a href="#">Guide Lines</a></li>
    	 <li><a href="#">Use of Meeting Rooms</a></li>
    	 <li><a href="#">Applications</a></li>
    	 </ul>
    	 </li> 
    		 <li><a href="#">Photos</a></li> 
    	 </ul>
    </li> 
    <li><a href="#">Annual Report</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Contact Us</a></li> 
    </ul> 
    </div>
    </div>
    and here is the css:
    Code:
    #menucolumn {
    height: 100%;
    width: 195px;
    background-image: url(images/menu_img.jpg);
    background-repeat: no-repeat;
    background-color: #EDEDE5;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #A3A3A3;
     
    }
    #mainmenu{
    width: 195px;
    }
    #mainmenu ul{
    padding: 0px;
    margin: 15px 0px 0px 45px;
    list-style-type: none;
    }
    #mainmenu li {
    margin: 0px;
    padding: 0px;
    height: 1.5em;
    	line-height: 1.5em; /* rather than padding-top and bottom */
    width: 150px;
    z-index:1;
    }
    #mainmenu ul li ul {
    position: absolute;
    left: 90px;
    top: -10px;
    display: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #4E4E4E;
    width: 160px;
     
    }
    #mainmenu li li{
    width: 160px;
    border-top: 1px solid #4E4E4E;
    border-right: 1px solid #4E4E4E;
    border-bottom: 0px solid #4E4E4E;
    border-left: 1px solid #4E4E4E;
    }
    #mainmenu a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #A52B2A;
    background-color: #EDEDE5;
    display: block;
    padding-left: 5px;
    }
    /* Sets all hovered li's and links to have the purple background */
    #mainmenu li:hover a, #mainmenu li.over a,
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover,
    #mainmenu li:hover li:hover li a:hover, #mainmenu li.over li.over li a:hover {
    color: #F5F5EB;
    background-color: #A52B2A;
    }
    /* Sets the the intial state of the dropdown back to default until it's hover over again*/
    #mainmenu li:hover li a, #mainmenu li.over li a,
    #mainmenu li:hover li:hover li a, #mainmenu li.over li.over li a {
    color: #A52B2A;
    background-color: #EDEDE5;
    }
    /* Places the submenu on top of the mainmenu */
    #mainmenu ul li:hover, #mainmenu ul li.over {
    position: relative;
    }
    #mainmenu li:hover ul, #mainmenu li.over ul { display: block; } /* The magic */
    /* HTML Hacks */
    * html #mainmenu ul li { float: left; height: 1%; }
    * html #mainmenu a {height: 1%; /* to make display: block work properly */ }
    Thanks for the help in advance.

    Trinity

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From a quick glance, you don't have your third level list style declared. (I believe that is the problem - I'm not an expert in CSS obviously)

    You have the second level list style declared via

    Code:
    #mainmenu li li{
    width: 160px;
    border-top: 1px solid #4E4E4E;
    border-right: 1px solid #4E4E4E;
    border-bottom: 0px solid #4E4E4E;
    border-left: 1px solid #4E4E4E;
    }
    You need to create another style basically like

    Code:
    #mainmenu li li ul{ /*  this formats the third level unorder list  */
    position: absolute;
    left: 90px;
    top: -10px;
    display: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #4E4E4E;
    width: 160px;
    }
    
    #mainmenu li li li{
      blah blah blah
    }

    I believe you can catch the drift...

    HTH,

    Michael


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
  •