CSS dropdown menu not working in IE

[Fitri]

Hi,

Can anybody help me to solve about css problem ?

I got a website which is http://www.matri.edu.my/site/

The problem is from the drop down menu is not work with IE.

And the problem also appear while accessing http://www.matri.edu.my/site/node/2

The drop down menu dont work to any browser.

Anyone can help me ?

[JKing]

Add display:block to Line:56 #m3_topnav ul li a in your css.

The menu is showing up in IE 8 just not positioned properly. In IE 7 the menu is showing up behind the picture on your homepage. If you scroll the slide to 2 you will see this when you hover.

The menu isn't working on http://www.matri.edu.my/site/node/2 because you haven't included the javascript on the page that controls your dropdown.

[Fitri]

Hi JKing,

Thanks for your reply and helps.

The menu its now working perfectly.

Can you help me on how to represent the menu nicely.

After i add display:block to Line:56 inside the css file.

The menu appearance is not really nice.

Hope can hear good news from you.

[JKing]

Try removing margin-right:1px; from #m3_topnav ul li a

And change the padding on #m3_topnav li a span to padding: 7px 15px 9px;

[Fitri]

Hi JKing,

They work perfectly!

Thanks alot.

Do you know how to make the menu "pengenalan" active while on http://www.matri.edu.my/site/node/2 ?

[JKing]

The same way utama is active on the homepage?

If so you just need to add the "selected" class to the proper ul li.

<ul>
            <li><a href="/site/"><span>Utama</span></a></li>
            <li class="selected"><a href="#"><span>Pengenalan</span></a>
                <ul>
 
                    <li><a href="http://www.matri.edu.my/site/node/2"><span>Kenali Matri</span></a></li>
                    <li><a href="#"><span>Part 2</span></a></li>
                    <li><a href="#"><span>Part 3</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>Staff &amp; Organisasi</span></a></li>
 
            <li><a href="#"><span>Pelajar</span></a></li>
            <li><a href="#"><span>Forum</span></a></li>
        </ul>
 
 

[Fitri]

Hi,

Thanks for your reply.

How to make the selected only appear on the "Utama" when user in home ?

And how to make the selected only appear on the "pengenalan" when user in "kenali matri" ?

[JKing]

Is your menu being pulled in from a header or some other include file?

[Fitri]

Hi,

Thanks for your reply.

Im just edit a page.tpl.php and for the javascript that issue before need to add into node.tpl.php

[JKing]

Which CMS are you using? Is it Drupal?

[Fitri]

Hi,

Thanks for your reply.

Yes it is drupal cms.

[JKing]

Could you post the code you are using in your page.tpl.php that generates your menu? If you are unsure which portion of the code does that just post the whole template.

[Fitri]

Hi,

Thanks for your reply.

Please refer to the below url for the full of code :
http://pastebin.com/svX2bhdY

[JKing]

Okay, not 100% sure if this will work or not. The logic is to use some php to check what page you are on and then set class="selected" to the right list item. I don't have a drupal installation so I haven't been able to test this.

<ul>
    <li <?php if (request_uri() == "/"){ echo class="selected";}?>><a href="<?php print $base_path ?>"><span>Utama</span></a></li>
    <li <?php if (request_uri() == "/node/2" || request_uri() == "/node/4" || request_uri() == "/node/5"){ echo class="selected";}?>><a href="#"><span>Pengenalan</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/site/node/2"><span>Kenali Matri</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/4"><span>Falsafah MATRI</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/5"><span>Misi &amp; Visi</span></a></li>
        </ul>
    </li>
    <li><a href="http://www.matri.edu.my/site/node/3"><span>Staff &amp; Organisasi</span></a></li>
    <li><a href="#"><span>Kemasukan MATRI</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/download/BORANG PERMOHONAN MATRI.doc"><span>Borang Kemasukan</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>Forum</span></a></li>
</ul>
 

[Fitri]

Hi,

Thanks for your hard try to help me.

I think i want to use "if" inside the code too.

The code given by you its not work.

I think this is not too important.

Thanks alot

[JKing]

Try this:

 
<ul>
    <li <?php if (request_uri() == "/site/"){ echo class="selected";}?>><a href="<?php print $base_path ?>"><span>Utama</span></a></li>
    <li <?php if (request_uri() == "/site/node/2" || request_uri() == "/site/node/4" || request_uri() == "/site/node/5"){ echo class="selected";}?>><a href="#"><span>Pengenalan</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/site/node/2"><span>Kenali Matri</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/4"><span>Falsafah MATRI</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/5"><span>Misi &amp; Visi</span></a></li>
        </ul>
    </li>
    <li><a href="http://www.matri.edu.my/site/node/3"><span>Staff &amp; Organisasi</span></a></li>
    <li><a href="#"><span>Kemasukan MATRI</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/download/BORANG PERMOHONAN MATRI.doc"><span>Borang Kemasukan</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>Forum</span></a></li>
</ul>
 

[Fitri]

Hi,

It says like 47 got problem

Parse error: syntax error, unexpected T_CLASS in page.tpl.php on line 47

 <li <?php if (request_uri() == "/site/"){ echo class="selected";}?>><a href="<?php print $base_path ?>"><span>Utama</span></a></li>

[JKing]

 
 
<ul>
    <li <?php if (request_uri() == "/site"){ echo 'class="selected"';}?>><a href="<?php print $base_path ?>"><span>Utama</span></a></li>
    <li <?php if (request_uri() == "/site/node/2" || request_uri() == "/site/node/4" || request_uri() == "/site/node/5"){ echo 'class="selected"';}?>><a href="#"><span>Pengenalan</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/site/node/2"><span>Kenali Matri</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/4"><span>Falsafah MATRI</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/5"><span>Misi &amp; Visi</span></a></li>
        </ul>
    </li>
    <li><a href="http://www.matri.edu.my/site/node/3"><span>Staff &amp; Organisasi</span></a></li>
    <li><a href="#"><span>Kemasukan MATRI</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/download/BORANG PERMOHONAN MATRI.doc"><span>Borang Kemasukan</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>Forum</span></a></li>
</ul>
 
 
 

[Fitri]

Hi,

There is no error.

But i think the code its not working at all.

[JKing]

Is the code currently active on your site?

<ul>
    <li <?php if (request_uri() == "/site/"){ echo 'class="selected"';}?>><a href="<?php print $base_path ?>"><span>Utama</span></a></li>
    <li <?php if (request_uri() == "/site/node/2" || request_uri() == "/site/node/4" || request_uri() == "/site/node/5"){ echo 'class="selected"';}?>><a href="#"><span>Pengenalan</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/site/node/2"><span>Kenali Matri</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/4"><span>Falsafah MATRI</span></a></li>
            <li><a href="http://www.matri.edu.my/site/node/5"><span>Misi &amp; Visi</span></a></li>
        </ul>
    </li>
    <li><a href="http://www.matri.edu.my/site/node/3"><span>Staff &amp; Organisasi</span></a></li>
    <li><a href="#"><span>Kemasukan MATRI</span></a>
        <ul>
            <li><a href="http://www.matri.edu.my/download/BORANG PERMOHONAN MATRI.doc"><span>Borang Kemasukan</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>Forum</span></a></li>
</ul>
 

In your current site's markup there is a <ul> tag that doesn't belong.

[Fitri]

Hi,

Thnaks alot.

Its work !

Thanks again