2 Replies Latest reply: Jul 13, 2010 5:56 AM by Ben Pleysier RSS

    Scrollable CSS Drop Down Menu?

    SEspider Community Member

      I'm very much an infant when it comes to CSS but I'm growning each day.

       

      Here's the deal. I've still having difficulty adding more then one drop down menu to a page with with their own CSS properties.

      So I went to cssmenumaker.com and made a simple drop menu that way I can keep it apart from any other menus I add to the page.

      Took some doing to get it working correctly, but I got it.

       

      But here's the problem. The menu is TOO LONG!! Most of the site's visitors use FireFox (FF) and others use Internet Explorer (IE).

      No biggie. I noticed that the currentI (and old HTML) code becomes scrollable in FF. Which is Great! But that code does not work in CSS pages.

       

      I'm upgrading the entire site to CSS and I'm almost done. But I need themenu to be scrollable as it is in FF with the old html code.

      I have two questions that I need answered concerning CSS.

       

      1- How do I make the drop menu scrollable?

      2- how do I use CSS to give different links different colors? The defualt is currently White.

       

      Here's the HTML code for the CSS drop menu:

       

      <table width="200" border="0" cellspacing="0" cellpadding="5">
                            <tr>
                              <td><div align="center">
                                <div id="outside">
                                  <ul id="navigation-1">
                                    <li><a href="#Leadership" title="Leadership" target="_self" >Leadership</a>
                                      <ul class="navigation-2">
                                        <li><a href="#Booking" title="Artist Booking" target="_self" >Artist Booking</a></li>
                                        <li><a href="#AN" title="Artist Networks" target="_self" >Artist Networks</a></li>
                                        <li><a href="#MS" title="Mission Statement" target="_self" >Mission Statement</a></li>
                                        <li><a href="#VS" title="Vision Statement" target="_self" >Vision Statement</a></li>
                                        <li><a href="#Values" title="Values Statement" target="_self" >Values Statement</a></li>
                                        <li><a href="#BP" title="Brand Promise" target="_self" >Brand Promise</a></li>
                                        <li><a href="#GS" title="Growth Strategy" target="_self" >Growth Strategy</a></li>
                                        <li><a href="#SAB" title="Services And Benefits" target="_self" >Services And Benefits</a></li>
                                        <li><a href="#UGAIBP" title="The UGAI Brand Promise" target="_self" >The UGAI Brand Promise</a></li>
                                        <li><a href="#HB" title="Health Benefits" target="_self" >Health Benefits</a></li>
                                        <li><a href="#FS" title="Financial Services" target="_self" >Financial Services</a></li>
                                        <li><a href="#LS" title="Legal Services" target="_self" >Legal Services</a></li>
                                        <li><a href="#PS" title="Promotion Services" target="_self" >Promotion Services</a></li>
                                        <li><a href="#Chapters" title="Chapters" target="_self" >Chapters</a></li>
                                        <li><a href="#Website" title="UGAI Web Site" target="_self" >UGAI Web Site</a></li>
                                        <li><a href="#ST" title="Street Team" target="_self" >Street Team</a></li>
                                        <li><a href="#PA" title="Publication Ads" target="_self" >Publication Ads</a></li>
                                        <li><a href="#Booking" title="Booking Referral System" target="_self" >Booking Referral System</a></li>
                                        <li><a href="#MNWAS" title="Monthly Newsletter With Artist Spotlight" target="_self" >Monthly Newsletter With Artist Spotlight</a></li>
                                        <li><a href="#CRD" title="Conference Registration Discounts" target="_self" >Conference Registration Discounts</a></li>
                                        <li><a href="#TD" title="Travel Discounts" target="_self" >Travel Discounts</a></li>
                                        <li><a href="#EventD" title="Event Discounts" target="_self" >Event Discounts</a></li>
                                        <li><a href="#ClubD" title="Club Discounts" target="_self" >Club Discounts</a></li>
                                        <li><a href="#MPD" title="Ministry Partner Discounts" target="_self" >Ministry Partner Discounts</a></li>
                                        <li><a href="#FreeMusic" title="Free Music Downloads" target="_self" >Free Music Downloads</a></li>
                                        <li><a href="#Apparel" title="UGAI Apparel - Promotional Item" target="_self" >UGAI Apparel - Promotional Item</a></li>
                                        <li><a href="http://www.uga-international.com/FAQ.html" title="Frequently Asked Questions" target="_self" >Frequently Asked Questions</a></li>
                                      </ul>
                                    </li>
                                  </ul>
                                </div>
                              </div></td>
                            </tr>
                          </table>

      ------------------------------------------------------------------------------------------ ----------------------------------

      And here is the .CSS style:

       

      #outside{
          border:1px solid #000000;
          background:#000000;
          }
      #navigation-1 {
          padding:1px 0;
          margin:0px;
          list-style:none;
          width:100%;
          height:21px;
          border-top:1px solid #FFFFFF;
          border-bottom:1px solid #FFFFFF;
          font:normal 8pt verdana, arial, helvetica;
      }
      #navigation-1 li {
          margin:0;
          padding:0;
          display:block;
          float:left;
          position:relative;
          width:200px;
      }
      #navigation-1 li a:link, #navigation-1 li a:visited {
          padding:4px 0;
          display:block;
          text-align:center;
          text-decoration:none;
          background:#000000;
          color:#ffffff;
          width:200px;
          height:21px;
      }
      #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
          padding:4px 0;
          display:block;
          text-align:center;
          text-decoration:none;
          background:#666666;
          color:#ffffff;
          width:200px;
          height:21px;
          border-left:1px solid #ffffff;
          border-right:1px solid #ffffff;
      }
      #navigation-1 li ul.navigation-2 {
          margin:0;
          padding:1px 1px 0;
          list-style:none;
          display:none;
          background:#ffffff;
          width:200px;
          position:absolute;
          top:21px;
          left:-1px;
          border:1px solid #000000;
          border-top:none;
      }
      #navigation-1 li:hover ul.navigation-2 {
          display:block;
      }
      #navigation-1 li ul.navigation-2 li {
          width:200px;
          clear:left;
          width:200px;
      }
      #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
          clear:left;
          background:#000000;
          padding:4px 0;
          width:200px;
          border:none;
          border-bottom:1px solid #ffffff;
          position:relative;
          z-index:1000;
      }
      #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
          clear:left;
          background:#666666;
          padding:4px 0;
          width:200px;
          border:none;
          border-bottom:1px solid #ffffff;
          position:relative;
          z-index:1000;
      }
      #navigation-1 li ul.navigation-2 li ul.navigation-3 {
          display:none;
          margin:0;
          padding:0;
          list-style:none;
          position:absolute;
          left:200px;
          top:-2px;
          padding:1px 1px 0 1px;
          border:1px solid #000000;
          border-left:1px solid #000000;
          background:#ffffff;
          z-index:900;
      }
      #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
          display:block;
      }
      #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
          background:#000000;
      }
      #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
          background:#666666;
      }
      #navigation-1 li ul.navigation-2 li a span {
          position:absolute;
          top:0;
          left:132px;
          font-size:12pt;
          color:#fe676f;
      }
      #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
          position:absolute;
          top:0;
          left:132px;
          font-size:12pt;
          color:#ffffff;
      }

       

       

      ------------------------------------------------------------------------------------------ ----------------------------------

      Thanks in advance.

       

      Message was edited by: SEspider Fixed Posting Of Codes