TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 884
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 296
  • Total: 296

Dropdown Menu

Started by NoFeaR, September 07, 2010, 11:24:11 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages 1 2 3 All
User actions

NoFeaR

#10
October 05, 2010, 06:08:35 PM
OMW, I gave the wrong URL. Its www.kalaharired.net
SO so so sorry guys

WillyP

#11
October 05, 2010, 09:16:24 PM
NP! Did you try what I said?

NoFeaR

#12
October 06, 2010, 06:26:47 AM
How do i disable it?
Here is the code.
display:block;overflow:visible;

NoFeaR

#13
October 06, 2010, 08:35:18 AM
Ok i see that its working in Internet Explorer. But i want it to also work in Firefox.

WillyP

#14
October 06, 2010, 11:30:32 PM
I took a closer look at your page.  I am guessing you just pasted the code for the menu and maybe other stuf in the page, in blocks. As a result, you have more than one head section.  Please post the code for the menu you put in the block here, in a code block.

ZarPrime

#15
October 07, 2010, 12:05:38 AM
NoFeaR,

Besides posting the code here for the menu that you are using in the block, as WillyP suggested, could you please verify that the menu you are using is the one from the link that you first posted in your original post in this topic (http://www.stunicholls.com/menu/pro_dropdown_2.html).  Your menu on your site doesn't even look like that one.  In fact, it might be a little easier for us to help you if you tell us the exact steps you took to get that menu on your site.  That is the only way that we can try to duplicate your efforts and help you solve the problem.

ZarPrime

NoFeaR

#16
October 07, 2010, 07:13:22 AM
Ok. Since i posted that first post i changed a few things. I will attach the code.

Code Select

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://www.kalaharired.net/links/style.css" type="text/css" />

</head>
<body>

<ul id="css3menu" class="topmenu">
    <li class="topfirst"><a href="http://www.kalaharired.net" title="Home"><img src="http://www.kalaharired.net/links/bhome.png" alt="Home"/>Home</a></li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=register" title="Register Free on the Website"><img src="http://www.kalaharired.net/links/service.png" alt="Register Free on the Website"/>Register Free on the Website</a></li>
    <li class="topmenu"><a href="#" title="Newsletters"><span><img src="http://www.kalaharired.net/links/green-download-32.png" alt="Newsletters"/>Newsletters</span></a>
    <ul>
        <li class="subfirst"><a href="#" title="Newsletter1">Newsletter1</a></li>
    </ul>

    </li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=teampage" title="Team"><img src="http://www.kalaharired.net/links/blue-discuss.png" alt="Team"/>Team</a></li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=forum" title="Forum"><img src="http://www.kalaharired.net/links/smile1.png" alt="Forum"/>Forum</a></li>
    <li class="topmenu"><a href="#03" title="Special Announcement"><span><img src="http://www.kalaharired.net/links/bnews.png" alt="Special Announcement"/>Special Announcement</span></a>
    <ul>
        <li class="subfirst"><a href="#" title="Tollie Jordaan Auction 30 October 2010"><img src="http://www.kalaharired.net/links/icon6.png" alt="Tollie Jordaan Auction 30 October 2010"/>Tollie Jordaan Auction 30 October 2010</a></li>
    </ul>

    </li>
    <li class="toplast"><a href="#" title="Classifieds"><img src="http://www.kalaharired.net/links/g-micon5.png" alt="Classifieds"/>Classifieds</a></li>
</ul>



</body>
</html>


Then the CSS
Code Select
ul#css3menu,ul#css3menu ul{
    margin:0;list-style:none;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;}
ul#css3menu li:hover>*{
    display:block;}
ul#css3menu li:hover{
    position:relative;}
ul#css3menu ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu{
    padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
    margin:0 0 0 1px;}
ul#css3menu ul>li{
    margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
    outline-style:none;}
ul#css3menu a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu ul li{
    float:none;margin:9px 0 0;}
ul#css3menu ul a{
    text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:16px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li:hover>a{
    background-color:#00c4ff;border-style:none;font:bold 12px Arial,sans-serif;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
    display:none;}
ul#css3menu li:hover > a img.def{
    display:none;}
ul#css3menu li:hover > a img.over{
    display:inline;}
ul#css3menu span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
    background-color:#333;background-image:none;border-style:solid;border-color:#262626;font:16px Arial,sans-serif;color:#1F80AE;text-decoration:none;}
ul#css3menu li.topfirst>a{
    height:26px;line-height:26px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topfirst:hover>a{
    line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topmenu>a{
    height:26px;line-height:26px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topmenu:hover>a{
    line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.toplast>a{
    height:26px;line-height:26px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.toplast:hover>a{
    line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu ._>li>a{
    padding:0;}
ul#css3menu li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu li.subfirst:hover>a{
    border-style:none;}

WillyP

#17
October 08, 2010, 01:22:59 AM
Only this should go in the block:
Code Select
<ul id="css3menu" class="topmenu">
    <li class="topfirst"><a href="http://www.kalaharired.net" title="Home"><img src="http://www.kalaharired.net/links/bhome.png" alt="Home"/>Home</a></li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=register" title="Register Free on the Website"><img src="http://www.kalaharired.net/links/service.png" alt="Register Free on the Website"/>Register Free on the Website</a></li>
    <li class="topmenu"><a href="#" title="Newsletters"><span><img src="http://www.kalaharired.net/links/green-download-32.png" alt="Newsletters"/>Newsletters</span></a>
    <ul>
        <li class="subfirst"><a href="#" title="Newsletter1">Newsletter1</a></li>
    </ul>

    </li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=teampage" title="Team"><img src="http://www.kalaharired.net/links/blue-discuss.png" alt="Team"/>Team</a></li>
    <li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=forum" title="Forum"><img src="http://www.kalaharired.net/links/smile1.png" alt="Forum"/>Forum</a></li>
    <li class="topmenu"><a href="#03" title="Special Announcement"><span><img src="http://www.kalaharired.net/links/bnews.png" alt="Special Announcement"/>Special Announcement</span></a>
    <ul>
        <li class="subfirst"><a href="#" title="Tollie Jordaan Auction 30 October 2010"><img src="http://www.kalaharired.net/links/icon6.png" alt="Tollie Jordaan Auction 30 October 2010"/>Tollie Jordaan Auction 30 October 2010</a></li>
    </ul>

    </li>
    <li class="toplast"><a href="#" title="Classifieds"><img src="http://www.kalaharired.net/links/g-micon5.png" alt="Classifieds"/>Classifieds</a></li>
</ul>


In other words, keep the stuff inside of the body tags, remove everything above before '<ul id="css3menu" class="topmenu">' and remove everything after the last </ul>.

Then copy the contents of the css file to the end of the css file for the skin you are using.

NoFeaR

#18
October 08, 2010, 06:46:45 AM
Sad to say that didn't work. It still goes underneath the other blocks.

NoFeaR

#19
October 08, 2010, 07:03:35 AM
It works fine in IE but its only firefox that has the problem.
Print
Go Up Pages 1 2 3 All
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.