Menu from Troll Technologies (CSS)

[redspartan927]

A small CSS code for a Menu. Typical CSS Color and Listing. No images/animation is used. It can be modified, however for user's comfort.

I'll give both CSS and demonstrate in HTML Code.

CSS:

/* menu */
#menu {
	background: #585858
	border-bottom: 1px solid #000000
	height: 37px;
	margin-bottom: 15px;
	margin: auto;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD
	-moz-box-shadow: 0px 2px 2px #DDDDDD
	box-shadow: 0px 2px 2px #DDDDDD
	padding: 0px 5px;
}
#menu ul {
	list-style: none;
	margin: auto;
	padding: 0;
}
#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;
	padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
	font-size: 13px;
	color: #FFF
	line-height: 14px;
	text-decoration: none;
	display: block;
	padding: 6px 10px 6px 10px;
	margin-bottom: 5px;
	z-index: 6;
	position: relative;
}
#menu > ul > li:hover > a {
	background: #000000
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
#menu > ul > li > div {
	display: none;
	background: #000000
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000000
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	background: #808080
}
#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}
#menu > ul > li ul + ul {
	padding-left: 20px;
}
#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #FFFFFF
	display: block;
	white-space: nowrap;
	min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
	background: #FFA500
}
#menu > ul > li > div > ul > li > a {
	color: #FFFFFF
}

------->> In "#menu" --- "menu" can be changed to anything you like << ----- Just for beginners

Heres an HTML code demonstration:

<div id="menu">
  <ul>
        <li><a href="https://trolltech****/viewforum.php?f=7">Battlefield 3</a></li>
        <li><a href="https://www.trolltech****/viewforum.php?f=16" target="_blank">VIPER Project</a></li>
        <li><a href="https://www.trolltech****/viewforum.php?f=18" target="_blank">Troll Domes IG</a></li>
        <li><a href="https://www.trolltech****/viewforum.php?f=4" target="_blank"><font size="3" color="aqua"><b>Troll Tech Digital Store</b></font></a></li>
        <li><a href="https://www.trolltech****/viewforum.php?f=12">OS-Tips and Tricks </a>
            <div style="">
                <ul>
                        <li><a href="https://www.trolltech****/viewforum.php?f=13">Windows OS</font></a></li>
                        <li><a href="https://www.trolltech****/viewforum.php?f=14">Apple Operating Systems</font></a></li>
                        <li><a href="https://www.trolltech****/viewforum.php?f=15">Open Source OS</font></a></li>
                </ul>
              </div>
          </li>
        <li><a href="https://www.trolltech****/viewforum.php?f=9">Programming </a>
            <div style="">
                <ul>
                        <li><a href="https://www.trolltech****/viewforum.php?f=10">C++</a></li>
                        <li><a href="https://www.trolltech****/viewforum.php?f=11">Java</a></li>
                </ul>
            </div>
        </li>
        <li><a href="https://trolltech****/viewforum.php?f=20">Computers and Internet</a></li>
 </ul>
</div>

Here's a Visual Demonstration:
https://www.trolltech(dot)tk <<------ Replace (dot) with a period.
<<----->> The Menu will be on the very top of the website and will not move.

Well that's about it

If you like this, please press thanks

Thanks for reading and using the menu.

---------- Post added at 06:28 PM ---------- Previous post was at 06:12 PM ----------

Sorry for spam. Please delete 2 of 3 these posts. Internet problems

[bannekz]

Nice little menu, clean code.