Editing the HTML side of the CSS?

***ChibiMaestro*** · #2 02-14-2011, 10:36 AM

Well I found this on Google sometime ago (and what I do when I find an epic code is save it xD).

Most sites say you have to use Javascript but this one only uses CSS and HTML xD

So....

Code:

<html> 
<head> 
<title>CSS based drop-down menu</title>	
	<style type="text/css"> 
ul {
	font-family: Arial, Verdana;
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul li {
	display: block;
	position: relative;
	float: left;
	}
li ul {
	display: none;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #2C5463;
	margin-left: 1px;
	white-space: nowrap;
	}
ul li a:hover {
	background: #617F8A;
	}
li:hover ul { 
	display: block; 
	position: absolute;
	}
li:hover li { 
	float: none;
	font-size: 11px;
	}
li:hover a {
	background: #617F8A;
	}
li:hover li a:hover {
	background: #95A9B1;
	}
	</style>		
</head> 
<body> 
	<ul id="menu"> 
			<li><a href="">Home</a></li> 
			<li><a href="">About</a> 
			<ul> 
			<li><a href="">The Team</a></li> 
			<li><a href="">History</a></li> 
			<li><a href="">Vision</a></li> 
			</ul> 
			</li> 
			<li><a href="">Products</a>
			<ul> 
		        <li><a href="">Cozy Couch</a></li> 
		        <li><a href="">Great Table</a></li> 
		        <li><a href="">Small Chair</a></li> 
		        <li><a href="">Shiny Shelf</a></li> 
		        <li><a href="">Invisible Nothing</a></li> 
			</ul> 
			</li> 
			<li><a href="">Contact</a> 
			<ul> 
		        <li><a href="">Online</a></li> 
		        <li><a href="">Right Here</a></li> 
		        <li><a href="">Somewhere Else</a></li> 
			</ul> 
			</li> 
			</ul>
</body> 
</html>

And yes, you will need to be able to edit the HTML because let's compare the different HTML menus:
The drop down menu:

Code:

	<ul id="menu"> 
			<li><a href="">Home</a></li> 
			<li><a href="">About</a> 
			<ul> 
			<li><a href="">The Team</a></li> 
			<li><a href="">History</a></li> 
			<li><a href="">Vision</a></li> 
			</ul> 
			</li> 
			<li><a href="">Products</a>
			<ul> 
		        <li><a href="">Cozy Couch</a></li> 
		        <li><a href="">Great Table</a></li> 
		        <li><a href="">Small Chair</a></li> 
		        <li><a href="">Shiny Shelf</a></li> 
		        <li><a href="">Invisible Nothing</a></li> 
			</ul> 
			</li> 
			<li><a href="">Contact</a> 
			<ul> 
		        <li><a href="">Online</a></li> 
		        <li><a href="">Right Here</a></li> 
		        <li><a href="">Somewhere Else</a></li> 
			</ul> 
			</li> 
			</ul>

The MA menu:

Code:

<ul>
	<li><a href='index.php'>Home</a></li>
	<li><a href='adopt.php'>Adopt</a></li>
	<li><a href='myadopts.php'>My Adopts</a></li>
	<li><a href='account.php'>My Account</a></li>
	<li><a href='messages.php'>Message Center</a></li>
	<li><a href='stats.php'>Top 10</a></li>
	<li><a href='shoutbox.php'>Shoutbox</a></li>
</ul>

^See that you only have 1 pair of <ul> tags?

So you can't use it for PokeHikke if that's what you were thinking of... but you can use it for a Mys site xD

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Side Bar v1.3.3	Nieth	Questions and Supports	10	06-04-2013 06:11 PM
How to edit Side Bar?	Abronsyth	Questions and Supports	6	12-11-2012 04:09 PM
Editing Side Bar Links	GuardiansWish	Questions and Supports	4	10-22-2012 08:18 AM
Side Shoutbox Mod	rickasawr	Mys v1.2.x Mods	6	09-12-2011 05:40 PM
Display images side by side?	SilverDragonTears	Questions and Supports	5	06-06-2011 02:55 AM

What's New?

What's Hot?

What's Popular?