CSS dropdown menu not working in IE

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Fitri
    New Member
    • Sep 2010
    • 11

    CSS dropdown menu not working in IE

    Hi,

    Can anybody help me to solve about css problem ?

    I got a website which is http://www.matri.edu.m y/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.m y/site/node/2

    The drop down menu dont work to any browser.

    Anyone can help me ?
  • JKing
    Recognized Expert Top Contributor
    • Jun 2007
    • 1206

    #2
    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.

    Comment

    • Fitri
      New Member
      • Sep 2010
      • 11

      #3
      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.

      Comment

      • JKing
        Recognized Expert Top Contributor
        • Jun 2007
        • 1206

        #4
        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;

        Comment

        • Fitri
          New Member
          • Sep 2010
          • 11

          #5
          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 ?

          Comment

          • JKing
            Recognized Expert Top Contributor
            • Jun 2007
            • 1206

            #6
            The same way utama is active on the homepage?

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

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

            Comment

            • Fitri
              New Member
              • Sep 2010
              • 11

              #7
              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" ?

              Comment

              • JKing
                Recognized Expert Top Contributor
                • Jun 2007
                • 1206

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

                Comment

                • Fitri
                  New Member
                  • Sep 2010
                  • 11

                  #9
                  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

                  Comment

                  • JKing
                    Recognized Expert Top Contributor
                    • Jun 2007
                    • 1206

                    #10
                    Which CMS are you using? Is it Drupal?

                    Comment

                    • Fitri
                      New Member
                      • Sep 2010
                      • 11

                      #11
                      Hi,

                      Thanks for your reply.

                      Yes it is drupal cms.

                      Comment

                      • JKing
                        Recognized Expert Top Contributor
                        • Jun 2007
                        • 1206

                        #12
                        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.

                        Comment

                        • Fitri
                          New Member
                          • Sep 2010
                          • 11

                          #13
                          Hi,

                          Thanks for your reply.

                          Please refer to the below url for the full of code :
                          Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

                          Comment

                          • JKing
                            Recognized Expert Top Contributor
                            • Jun 2007
                            • 1206

                            #14
                            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.

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

                            Comment

                            • Fitri
                              New Member
                              • Sep 2010
                              • 11

                              #15
                              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

                              Comment

                              Working...