Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Drop down menus

Discussion in 'Website Coding & Programming Forum:' started by GingerChris, Mar 12, 2009.

  1. GingerChris

    GingerChris Member

  2. salvador

    salvador Member

    I'd ask Mr Google if I were you ;)

    ~Peace~
     
  3. conanite

    conanite New Member

    using CSS, make the menu invisible, then use more CSS to make it visible again when hovered

    HTML:
    <div class='menu'>menu label
      <ul>
        <li>menu item 1</li>
        <li>menu item 2 etc</li>
      </ul>
    </div>
    
    Code:
    .menu ul { display:none; }
    
    .menu:hover ul { display:block; }
    
    That's the basic principle, there's heaps more to do to get positioning right. And if you're targeting IE, .menu:hover won't work, you'll need some javascript onmouseover/onmouseout handlers to simulate this.
     
  4. GingerChris

    GingerChris Member

    I cant get it to work...

    This is my code:

    Code:
     <ul id="tablist">
            <li><a class="current" href="index.html" accesskey="m"><span class="key">Home</span></a>        </li>
            <li><a href="about.html" accesskey="e"><span class="key">A</span>bout Us</a></li>
            <li><a href="dedicated.html" accesskey="p"><span class="key">D</span>edicated Servers</a></li>
            <li><a href="vps.html" accesskey="c"><span class="key">V</span>irtual Servers</a></li>
            <li><a href="support.html" accesskey="r"><span class="key">S</span>upport</a></li>
          </ul>
        </div>
    and this is my CSS

    Code:
    #tablist{  margin: 25px 0 0 0;  }
    	#tablist li{ list-style: none; display: inline;  }
    	#tablist li a{
    		text-decoration: none;
    		margin: 0 3px 0 0;
    		padding: 4px 15px;
    		border: 1px solid #3B3B3B;
    		font-weight: bold;
    		color: #ccc;
    	}
    	#tablist li a:hover{
    		border: 1px solid #55684A;
    		color: #fff;
    	}
    	#tablist li a.current{
    		background: #ADD597;
    		color: #fff;
    	}
    	#tablist .key { text-decoration: underline; }
    
     
  5. GingerChris

    GingerChris Member

    I want to be able to get dedicated, vps and support to drop down with about 4 links in each

    edit sorry for double post.
     
  6. conanite

    conanite New Member

    The submenu needs to be inside the <li> menu header. The submenu display is controlled by the CSS rule "#tablist li:hover ul" (or javascript for IE).

    HTML:
     <ul id="tablist">
            <li>
               <a class="current" href="index.html" accesskey="m"><span class="key">Home</span></a>
               <ul>
                 <li><a href="item1.html">item 1</a></li>
                 <li><a href="item2.html">item 2</a></li>
               </ul>
            </li>
            <li>etc</li>
          </ul>
    
    Code:
    #tablist li ul { display:none; }
    
    #tablist li:hover ul { display:block; }
    
    Afaik that should do the trick. Sorry if my previous reply was unclear...
     

Share This Page