SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add Submenu dropdown for my CSS Menu

    Hi guys, i am new to html and CSS and just trying to add a submenu to the current CSS menu i currently have now.

    Link yo website : http://www.campjeunesserichelieu.com...CJR/index.html

    Here is my HTML code :

    Code:
     <div id="navigaition_panel">
        <div class="nav">
          <ul>
            <li><a href="index.html" class="over">Accueil</a></li>
            <li><a href="about-us.html" >Inscription</a></li>
    
     ===========================================
                  Need to insert Submenu here                         
                              <ul><li>Page1</li></ul>
                              <ul><li>Page2</li></ul>
                              <ul><li>Page3</li></ul>
    =============================================
    
            <li><a href="#">Site</a></li>
            <li><a href="services.html">Média</a></li>
    		<li><a href="contact.html">Contact</a></li>
    	  </ul>
    	  <div class="clear"></div>
        </div>
      </div>

    Here is my current CSS :

    Code:
    #navigaition_panel {clear:both; background:url(../images/nav_gradient.gif) repeat-x 0 0; height:74px;}
    
    .nav {margin:0px; padding:0px 0px 0px 80px;}
    .nav ul{margin:0px 0px 0px 0px; padding:0px;}
    .nav ul li{
    	margin:0px;
    	padding:0 1px 0 2px;
    	list-style:none;
    	text-transform:uppercase;
    	float:left;
    	color:#fff;
    	text-align:center;
    	display:block;
    	font-size:12px;
    	font-weight:bold;
    	background-image: url(../images/nav_line.gif);
    	background-repeat: no-repeat;
    	background-position: 0px 5px;
    }
    .nav ul li a{float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030  ; background:url(../images/menu_bg2.gif) no-repeat 0 0; display:block}
    .nav ul li a:hover {float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }
    
    .nav ul li a.over{float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block;}

    Any help would be appreciated !!!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is how. Just copy and paste the demo code into your editor and save it. Then open your current page. And then merge the two checking with each edit that it still works. That way when it stops working you know why.

    http://www.websitecodetutorials.com/...-down-menu.php

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the example but ,,, i still need my menu to look the same .. not like the one in the example ... anyway i can modify mine to add a dropmenu ? ...

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Of course! Just add the nested ul and the css. I can't code it now. Try your hand at it. It's very easy. Try what I suggested above. Or someone else will code it for your soon I'm sure

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, so here is how far ive got :

    example.png

    Only problem is, when i go over LINK 2 ... it show the submenu ... but covers the LINK2 ... it should show the options under LINK2....

    Please help

    My CSS so far :

    #navigaition_panel {clear:both; background:url(../images/nav_gradient.gif) repeat-x 0 0; height:74px;}
    #nav {list-style:none; height:2em; margin:0px; padding:0px 0px 0px 80px;}
    #nav li {
    position:relative;
    margin:0px;
    padding:0 1px 0 2px;
    list-style:none;
    text-transform:uppercase;
    float:left;
    color:#fff;
    text-align:center;
    display:block;
    font-size:12px;
    font-weight:bold;
    background-image: url(../images/nav_line.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    }
    #nav li:hover {
    float:left; background:url(../images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

    #nav a {
    float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030 ; background:url(../images/menu_bg2.gif) no-repeat 0 0; display:block
    }
    /* --------- Drop Down -------- */
    #nav ul {
    position:absolute;
    left:-999em;
    margin:0px 0px 0px 0px; padding:0px;
    }
    #nav li:hover ul { left:0; top:auto; background:url(../images/menu_bg2.gif ) no-repeat 0 bottom; display:block;
    }

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    you missed top:100%; on the #nav ul. that declaration serves to position the TOP of the submenu's UL at the BOTTOM of the parent's LI.

    Hope that helps.

  7. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried added the TOP 100% and it did now work ...

    #nav ul {
    position:absolute;
    left:-999em;
    margin:0px 0px 0px 0px; padding:0px;
    top:100%;
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by xrollat View Post
    I tried added the TOP 100% and it did now work ...
    Could you update your working example? The link you gave in post 1 doesn't have a submenu at all.

  9. #9
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that, give it another try now : http://www.campjeunesserichelieu.com...CJR/index.html

    When you click on Link 2 .... Link2 goes away and show the 3 submenus ,,, which is fine but ... i need to LINK2 to stay visible also.

    Thank you

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Try changing this:

    Code:
    #nav li:hover ul { left:0; top:auto; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }
    to this

    Code:
    #nav li:hover ul { left:0; top:100%; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }
    and if that doesn't work, then try this:

    Code:
    #nav li:hover ul { left:0; top: 73px; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the help, that did work ! but this is what i get now ... button are not the same size and background colors changes ...

    Any idea why ? ...

    example.png


    My CSS :

    /************************************************************************************/
    #navigaition_panel {clear:both; background:url(../images/nav_gradient.gif) repeat-x 0 0; height:74px;}
    #nav {list-style:none; height:2em; margin:0px; padding:0px 0px 0px 80px;}
    #nav li {
    position:relative;
    margin:0px;
    padding:0 1px 0 2px;
    list-style:none;
    text-transform:uppercase;
    float:left;
    color:#fff;
    text-align:center;
    display:block;
    font-size:12px;
    font-weight:bold;
    background-image: url(../images/nav_line.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    }
    #nav li:hover {
    float:left; background:url(../images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

    #nav a {
    float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030 ; background:url(../images/menu_bg2.gif) no-repeat 0 0; display:block
    }
    /* --------- Drop Down -------- */
    #nav ul {
    position:absolute;
    left:-999em;
    margin:0px 0px 0px 0px; padding:0px;

    }

    #nav li:hover ul { left:0; top:100%; background:url(../images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

  12. #12
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone ? ....

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Looks pretty good now! I guess you've found a solution. All I would add, to get rid of the bullets, is this:

    Code:
    #menu {list-style: none;}

  14. #14
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for the last piece of code, that did the trick !!!

    Menu completed

    This place is great, awsome support.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Great, glad we could help. I look forward to seeing you around here again.


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
  •