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 ![Smile](images/emotions/emo5.png)
If you like this, please press thanks ![Smile](images/emotions/emo5.png)
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