Hey im trying to make a horizontal menu based on Glossy Vertical Menu but im new to css and it keeps turning to custard:) can some one pls help me to do this or post the css code i need to use
Printable View
Hey im trying to make a horizontal menu based on Glossy Vertical Menu but im new to css and it keeps turning to custard:) can some one pls help me to do this or post the css code i need to use
ok heres my code so far for the horizontalmenu based on glossy-vertical-menu
as ya can see from the below code its not working any ideas
CSS CODE
HTML CODECode:<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.topmenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 100%;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
float: left;
}
.topmenu li{
display: inline;
}
.topmenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: inline;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
float: left;
}
* html .topmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.topmenu li a:visited, .topmenu li a:active{
color: white;
}
.topmenu li a:hover{
color: yellow;
background-image: url(images/glossyback2.gif);
}
</style>
Code:<ul class="topmenu">
<li><a href="http://www.link1/.php" >link1</a></li>
<li><a href="http://www.link2.php" >link2</a></li>
<li><a href="http://www.ink3.php">link3</a></li>
<li><a href="http://www.ink4.php">Link4</a></li>
<li><a href="http://www.link5.php">link5</a></li>
<li><a href="http://www.link5.php" Chat</a></li>
</ul>
Here is a link for a horizontal glossy menu.
http://javascriptkit.com/script/scri...stopmenu.shtml
In the css just change the "background: url" to "images/glossyback.gif ".
This one has a javascript file to allow for submenu list. I believe it is optional if you don't plan on subs. I myself just found that some people are disabling javascript in their browsers and if they do then no sublinks show up when they hover their mouse over the main link. You can still use the css though. When I looked at it I noticed it is made like the glossy vertical. In fact they have the same glossy vertical but with different colors. Now I know why there are links to the javascriptkit site in this vertical menu.:)