SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Drop Down Menu

  1. #1
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Drop Down Menu

    I created my first CSS based drop down menu, but it doesn't seem to work. The menu goes behind the content and is not clickable in both ie and ff.


    The "#menu" is what styles the drop down menu


    The "services link" is the only drop down


    Thanks,

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samg914 View Post
    I created my first CSS based drop down menu, but it doesn't seem to work. The menu goes behind the content and is not clickable in both ie and ff.


    The "#menu" is what styles the drop down menu


    The "services link" is the only drop down


    Thanks,
    What is the menu 'going behind'?

    Going to need to see some code to help.

  3. #3
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML:
    Code:
    <div id="menu">
    
    <ul id="home-1">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home-alt.jpg',1)"><img src="images/home.jpg" alt="Home" name="Home" width="103" height="29" border="0" id="Home" /></a></li>
    </ul>
    
    <ul id="about-us-2">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','images/about-us-alt.jpg',1)"><img src="images/about-us.jpg" alt="About Us" name="About Us" width="128" height="29" border="0" id="About Us" /></a></li>
    </ul>
    
    <ul id="services-3">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','images/services-alt.jpg',1)"><img src="images/services.jpg" alt="Services" name="Services" width="121" height="29" border="0" id="Services" /></a></li>
    <li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
    <li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
    <li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
    </ul>
    
    <ul id="gallery-4">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/gallery-alt.jpg',1)"><img src="images/gallery.jpg" alt="Gallery" name="Gallery" width="108" height="29" border="0" id="Gallery" /></a></li>
    
    </ul>
    
    <ul id="testimonials-5">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Testimonials','','images/testimonials-alt.jpg',1)"><img src="images/testimonials.jpg" alt="Testimonials" name="Testimonials" width="155" height="29" border="0" id="Testimonials" /></a></li>
    </ul>
    
    <ul id="contact-us-6">
    <li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Us','','images/contact-us-alt.jpg',1)"><img src="images/contact-us.jpg" alt="Contact Us" name="Contact Us" width="124" height="29" border="0" id="Contact Us" /></a></li>
    </ul>
    
    <ul id="eight-7">
    <li class="top"><img src="images/eight.jpg" width="211" height="29" /></li>
    </ul>
    
    </div>
    <div id="under-nav"><img src="images/under-nav.jpg" /></div>
    CSS

    Code:
    #menu{
        width:950px;
        height:29px;
        float: left;
        z-index: 10;
    }
    #under-nav  {
        float: left;
        height: 11px;
        width: 950px;
        z-index: 5;
    }
    
    #menu ul .item{display:none;}
    #menu ul:hover .item{
        display:block;
        width:100px;
        height:25px;
        padding:0px;
        margin:0px;
    }
    
    #menu ul:hover .item a{color:;text-decoration:none;}
    #menu ul:hover .item a img{
        border:none;
    }
    #menu ul:hover .item a:hover{color:;}
    
    #menu ul{
        height:29px;
        float:left;
        margin:0px;
        padding:0px;
        list-style:none;
    }
    .clear{clear:both;height:10px;}
    
    #home-1 { width:103px;
    
    }
    #about-us-2 { width:128px;
    
    }
    #services-3 { width:121px;
    
    }
    #gallery-4 { width:108px;
    
    }
    #testimonials-5 { width:155px;
    
    }
    #contact-us-6 { width:124px;
    
    }
    #eight-7 { width:211px;
    
    }
    Last edited by Paul O'B; Feb 10, 2010 at 08:54. Reason: code tags added

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You would need to add position:relative to #menu as z-index only applies to positioned elements.

    Code:
    #menu {
        width:950px;
        height:29px;
        float: left;
        z-index: 10;
    position:relative;
    }
    The z-index of 10 would need to be higher than the content that follows it of course.

    I would suggest that you abandon that old fashioned js rollover menu and go for something leaner and cleaner like the suckerfish menus.

    Here is an example.

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I would suggest that you abandon that old fashioned js rollover menu and go for something leaner and cleaner like the suckerfish menus.
    I was going to say the same thing when I saw the DW code in my email, you beat me to it.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dc dalton View Post
    I was going to say the same thing when I saw the DW code in my email, you beat me to it.
    Off Topic:


    Hi dc - nice to see you still around

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Off Topic:


    Hi dc - nice to see you still around
    Just came back actually but I will be around for a while

  8. #8
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the information. I did this and it worked great. Also, considering you both recommended the sucker fish menu, I will look into that instead. Thanks, Samuel

  9. #9
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samg914 View Post
    Thanks for the information. I did this and it worked great. Also, considering you both recommended the sucker fish menu, I will look into that instead. Thanks, Samuel
    I have an example of the power of suckerfish menu, combined with a CSS layout you can look at here:

    http://davidcdalton.com/pages/articl...e/menutest.php

    There are also two tutorials on my site that go along with it. Feel free to steal the code from the example and play with it. Once you understand and start using these type menus you will never go back to that DW garbage

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton View Post
    I have an example of the power of suckerfish menu, combined with a CSS layout you can look at here
    DC, nice article. "Spider killer" menus?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •