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:
Code:
/* 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:
Code:
<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