SitePoint Sponsor

User Tag List

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

    Help with CSS 2nd Level Dropmenu

    Hi guys,

    Having problem creating / formating the 2nd level submenu for my website.

    Here is what i got so far :

    css_menu.JPG

    Here is my CSS :

    Code:
    #navigation_panel {background:#F93; height:50px;}
    
    #menu{border:none;border:0px;margin:0px;padding:0px 0px 0px 30px;list-style: none;font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;font-size:16px;font-weight:bold;}
    
    #menu ul{background:#F93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);}
    
    #menu li{float:left;padding:0px 0px 0px 5px;}
    
    #menu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0px;padding:0px 25px;text-align:center;text-decoration:none;}
    
    #menu li a:hover{background:#C60;color:#FFFFFF;text-decoration:none;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);}
    
    #menu ul li:hover a{background:#C60;color:#FFFFFF;text-decoration:none;}
    
    #menu li ul{display:none;height:auto;padding:0px;margin:0px;border:0px;position:absolute;width:200px;z-index:200;}
    
    #menu li:hover ul{display:block}
    
    #menu li:hover ul{display:block}/* show first level*/
    #menu li:hover ul ul{display:none}/* hide nested level*/
    
    #menu li li:hover ul{/* show second nested level*/
    display:block;
    left:100%;
    top:0;
    }
    /* make hopver persistent on chosen item */
    #menu li:hover > a,
    #menu li li:hover > a{background:#C60;color:#ffffff;text-decoration:none;border:0px;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    }
    
    
    #menu li li {position:relative;display:block;float:none;margin:0px;padding:0px;width:200px;background:#F93;background-image:none;}
    
    #menu li:hover li a{background:none;}
    
    #menu li ul a{display:block;height:50px;font-size:14px;font-style:normal;margin:0px;padding:0px 10px 0px 15px;text-align:left;}
    
    #menu li ul a:hover, .menu li ul li:hover a{border:0px;color:#ffffff;text-decoration:none;background:#C60;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); }

    My HTML :

    Code:
    <div id="navigation_panel">
      <ul id="menu">
      <li><a href="index.html">Informations</a>
        <ul>
          <li><a href="programmation.html">Programmation</a></li>
          <li><a href="mission-objectifs.html">Mission / Objectifs</a></li>
        </ul>
      </li>
      <li><a href="inscription.html">Inscription</a></li>
        <li><a href="site.html">Site</a>
        <ul>
          <li><a href="jeux.html">Jeux</a></li>
    	  <li><a href="chalets.html">Chalets</a></li>
    
        </ul>
      </li>
          <li><a href="media.html">Média</a>
        <ul>
          <li><a href="photos.html">Photos</a></li>
          <li><a href="videos.html">Vidéos</a></li>
    	  <li><a href="chansons.html">Chansons</a></li>
    	  <li><a href="temoignages.html">Témoignages</a>
    	    <ul>
    		<li>test1</li>
    		<li>test2</li>
    		</ul>
    	  </li>
    	  <li><a href="histoires-legendes.html">Histoires / Légendes</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you are gonna kick yourself.

    you are styling based on a combination of LI and A. your 3rd level doesnt have an A!
    change the mark up to <li><a href="#">test2</a></li> and you will see it works fine.


  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow lol, sorry now i feel stupid, Thanks for the quick tip. Menu working fine now lol.


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
  •