CSS Drop down menus

[GingerChris]

How do I make a drop down menu using CSS like on

SmartWaveTech :: Re-inventing the future

All replies are appreciated.

Chris

 

[salvador]

I'd ask Mr Google if I were you

~Peace~

 

[conanite]

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

<div class='menu'>menu label
  <ul>
    <li>menu item 1</li>
    <li>menu item 2 etc</li>
  </ul>
</div>

.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.

 

[GingerChris]

I cant get it to work...

This is my 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

#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; }

 

[GingerChris]

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.

 

[conanite]

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).

 <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>

#tablist li ul { display:none; }

#tablist li:hover ul { display:block; }

Afaik that should do the trick. Sorry if my previous reply was unclear...

 

[Royale-Graphics]

I used this website for my menu Stu Nicholls | CSSplay | CSS only menus