SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown menu CSS help!

    Code:
    #Menu {
        clear:left;
        height:48px;
        margin:0 15px;
        border-bottom:1px solid #c0c0c0;
        z-index:3;
    }
        #Menu ul {
            list-style:none;
        }
            #Menu ul li {
                float:left;
                position:relative;
            }
            #Menu ul li a {
                display:block;
                height:48px;
                text-indent:-999em;
            }
                #Menu ul li a#MenuHome {
                    width:66px;
                    margin-left:12px;
                    margin-right:80px;
                    background:url("../images/menu_home.png") no-repeat scroll 0 0 transparent;
                }
                #Menu ul li a#MenuWhoWeAre {
                    width:117px;
                    margin-right:79px;
                    background:url("../images/menu_who_we_are.png") no-repeat scroll 0 0 transparent;
                }
                #Menu ul li a#MenuWhatWeDo {
                    width:118px;
                    margin-right:79px;
                    background:url("../images/menu_what_we_do.png") no-repeat scroll 0 0 transparent;
                }
                #Menu ul li a#MenuGetInvolved {
                    width:126px;
                    margin-right:82px;
                    background:url("../images/menu_get_involved.png") no-repeat scroll 0 0 transparent;
                }
                #Menu ul li a#MenuNews {
                    width:64px;
                    margin-right:80px;
                    background:url("../images/menu_news.png") no-repeat scroll 0 0 transparent;
                }
                #Menu ul li a#MenuDonate {
                    width:81px;
                    background:url("../images/menu_donate.png") no-repeat scroll 0 0 transparent;
                }
                    #Menu ul li a:hover {
                        background-position:0 -48px !important;
                    }
                /* Highlist current page */
                body#Home #Menu ul li a#MenuHome,
                body#WhoWeAre #Menu ul li a#MenuWhoWeAre,
                body#WhatWeDo #Menu ul li a#MenuWhatWeDo,
                body#GetInvolved #Menu ul li a#MenuGetInvolved,
                body#News #Menu ul li a#MenuNews,
                body#Donate #Menu ul li a#MenuDonate {
                    background-position:0 -48px !important;
                }
        #Menu .subMenu {
            position:absolute;
            display:none;
            top:0;
            left:-7px;
            width:270px;
            height:284px;
            background:url("../images/dropdown_who_we_are.png") no-repeat scroll 0 0 transparent;
            z-index:21;
        }
            #Menu .subMenu.whatWeDo {
                background:url("../images/dropdown_what_we_do.png") no-repeat scroll 0 0 transparent;
            }
            #Menu .subMenu.getInvolved {
                background:url("../images/dropdown_get_involved.png") no-repeat scroll 0 0 transparent;
            }
    
       <div id="Menu">
                    <ul>
                        <li><a id="MenuHome" href="index.php">Home</a></li>
                        <li><a id="MenuWhoWeAre"  href="who-we-are.php">Who we are</a></li>
                       	 <li><a id="MenuWhoWeAre" class="subMenu" href="sdfdafda">dsafdsa</a></li>
                        <li><a id="MenuWhatWeDo" class="menuParent" href="what-we-do.php">What we do</a></li>
                        <li><a id="MenuGetInvolved" class="menuParent" href="get-involved.php">Get involved</a></li>
                        <li><a id="MenuNews" href="news.php">News</a></li>
                        <li><a id="MenuDonate" href="donate.php">Donate</a></li>
                    </ul>
                </div>
    Can you help me with this css? I want to have submenu just like on this page http://www.transparency.org, but I tried to add submenu and it doesn't work.
    Last edited by Paul O'B; Dec 24, 2012 at 04:42. Reason: code tags added

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi somvannda. Welcome to the forums.

    There isn't actually a submenu in your HTML yet. You need to add it in something like this:


    Code:
    <ul>
    <li><a id="MenuHome" href="index.php">Home</a></li>
    <li><a id="MenuWhoWeAre" href="who-we-are.php">Who we are</a>
        <ul>
            <li><a id="" href="">Link 1</a></li>
            <li><a id="" href="">Link 2</a></li>
            <li><a id="" href="">Link 3</a></li>
        </ul>
    </li>
    <li><a id="MenuWhoWeAre" class="subMenu" href="sdfdafda">dsafdsa</a></li>
    <li><a id="MenuWhatWeDo" class="menuParent" href="what-we-do.php">What we do</a></li>
    <li><a id="MenuGetInvolved" class="menuParent" href="get-involved.php">Get involved</a></li>
    <li><a id="MenuNews" href="news.php">News</a></li>
    <li><a id="MenuDonate" href="donate.php">Donate</a></li>
    </ul>

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did add them but nothing work

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I give up above code of css and i come with this new code now i got everything seemed to work, except when i put display: none, it won't show up when i deleted it, show everything and code below:
    Code:
    .navigation{
        width:960px;
        margin:0 auto 19px;
        z-index:21;
        position:relative;
    }
    .navigation #nav {
    }
    .navigation:after{
    	clear:both;
    	content:"";
    	display:block;
    }
    #nav {
    	width:936px;
    	height:39px;
    	padding:0 0 10px 0;
        margin-left:12px;
    	border-bottom:1px solid #c0c0c0;
    }
    #nav li.nav-holder {
        height:39px;
        position:relative;
        float:left;
    }
    .nav-item {
        height:16px;
    }
        .nav-item:hover  {
            z-index:21;
            background-image:url("../images/menu_bg_header.png");
        }
    
    #nav a.nav-label {
        display:block;
        overflow:hidden;
        margin-right:0;
        outline:none;
        font-size:18px;
        color:#000;
        padding:0 10px;
        padding-top:23px;
        text-align:center;
        text-transform:uppercase;
        white-space:nowrap;
    }
        #nav a:hover {
            color:red;
        }
    
    /* Menu Items and States - copied from OCG.css as these are core styles! - TIMMY OCT 2012
    ------------------------------------------------------------------------------------------- */
    
    .home #nav .nav-holder.nav-home .nav-item a.nav-label, 
    .donate #nav .nav-holder.nav-donate .nav-item a.nav-label, 
    .news #nav .nav-holder.nav-news .nav-item a.nav-label, 
    .whoweare #nav .nav-holder.nav-whoweare .nav-item a.nav-label, 
    .whatwedo #nav .nav-holder.nav-whatwedo .nav-item a.nav-label, 
    .getinvolved #nav .nav-holder.nav-getinvolved .nav-item a.nav-label,
    .press #nav .nav-holder.nav-press .nav-item a.nav-label,  
    .sector-detail #nav .nav-holder.nav-sector-detail .nav-item a.nav-label,
    .discuss #nav .nav-holder.nav-discuss .nav-item a.nav-label,
    .our-history #nav .nav-holder.nav-our-history .nav-item a.nav-label { 
    	color:red;
        background:url("../images/menu_bg_header.png") repeat-x scroll 0 0 transparent;
    }
    
    /* SPECIAL DONATE COLOR / STYLES - TIMMY OCT 2012
    -------------------------------------------------------------------------- */
    
      /* .donate #nav .nav-holder.nav-donate .nav-item a.nav-label {
    	color: #3695D8;
    	font-family: 'HelveticaNeueW01-67MdCn 692710', Arial, Helvetica, sans-serif;
       }*/
    
    
    /* USED WHEN IN BLACK / ALT BACKGROUND MODE 
    -------------------------------------------------------------------------- */
    
    body.alt.home #nav .nav-holder.nav-home .nav-item a.nav-label, 
    body.alt.donate #nav .nav-holder.nav-donate .nav-item a.nav-label, 
    body.alt.news #nav .nav-holder.nav-news .nav-item a.nav-label, 
    body.alt.whoweare #nav .nav-holder.nav-whoweare .nav-item a.nav-label, 
    body.alt.whatwedo #nav .nav-holder.nav-whatwedo .nav-item a.nav-label, 
    body.alt.getinvolved #nav .nav-holder.nav-getinvolved .nav-item a.nav-label { 
    	color:#3698D8;
    	background-image:url("../images/menu_bg_header-alt.png");
    }
    
    body.alt.home #nav .nav-holder.nav-home .nav-item,
    body.alt.donate #nav .nav-holder.nav-donate .nav-item,
    body.alt.news #nav .nav-holder.nav-news .nav-item,
    body.alt.whoweare #nav .nav-holder.nav-whoweare .nav-item,
    body.alt.getinvolved #nav .nav-holder.nav-getinvolved .nav-item,
    body.alt.whatwedo #nav .nav-holder.nav-whatwedo .nav-item {
        background-image:url("../images/menu_bg_header-alt.png");
    }
    
    
    #nav .nav-sub {
        position:absolute;
    }
      
      #nav ul li {
    	  list-style: none
      }
        #nav .nav-sub ul {
            padding:30px;
            padding-right:46px;
            background-color:#FFF;
        }
            #nav .nav-sub ul li {
                padding-left:16px;
                background: url("../images/listitem-disc.png") no-repeat scroll 0 3px transparent;
                white-space:nowrap;
            }
                #nav .nav-sub ul li a {
                    display:block;
                    font-size:14px;
                    line-height:14px;
                    color:#5D5D5D;
                    padding-bottom:8px;
                    margin-bottom:8px;
                    border-bottom:1px solid #5D5D5D;
                }
                #nav .nav-sub ul li.last a {
                    margin-bottom:0;
                    border-bottom:0;
                }
    
      <div class="navigation">
    
                                <ul id="nav">
                                    <li class="nav-holder nav-home">
                                        <div class="nav-item">
                                            <a class="nav-label headerMedium" href="http://www.transparency.org/">Home</a>
                                        </div>
                                    </li>
    
                                    <li class="nav-holder nav-whoweare">
                                        <div class="nav-item sub-holder">
                                            <a class="nav-label headerMedium" href="/whoweare">Who We Are</a>
                                            <div class="nav-sub">
                                               <ul>
                                                    <li><a href="/whoweare">Who We Are home</a></li>
                                                    <li><a href="/whoweare/organisation">Our organisation</a></li>
                                                    <li><a href="/whoweare/accountability">Our accountability</a></li>
    
                                                    <li><a href="/whoweare/work">Work with us</a></li>
                                                    <li class="last"><a href="/whoweare/contact">Contact us</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
    
                                    <li class="nav-holder nav-whatwedo">
                                        <div class="nav-item sub-holder">
                                            <a class="nav-label headerMedium" href="/whatwedo">What We Do</a>
                                            <div class="nav-sub">
                                         
                                                <ul>
                                                    <li><a href="/whatwedo">What We Do home</a></li>
                                                    <li><a href="/topic">Corruption by topic</a></li>
                                                    <li><a href="/country">Corruption by country</a></li>
                                                    <li><a href="/research">Research</a></li>
                                                    <li><a href="/whatwedo/publications">Publications</a></li>
                                                    <li><a href="/whatwedo/tools">Tools</a></li>
                                                    <li class="last"><a href="/whatwedo/projects">Projects and activities</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
    
                                    <li class="nav-holder nav-getinvolved">
                                        <div class="nav-item sub-holder">
                                            <a class="nav-label headerMedium" href="/getinvolved">Get involved</a>
                                            <div class="nav-sub">
                                          
                                                <ul>
                                                    <li><a href="/getinvolved">Get Involved home</a></li>
                                                    <li><a href="/getinvolved/join">Join the conversation</a></li>
                                                    <li><a href="/getinvolved/report">Report corruption</a></li>
                                                    <li><a href="/getinvolved/spreadtheword">Spread the word</a></li>
                                                    <li><a href="/getinvolved/stayinformed">Stay informed</a></li>
                                                    <li><a href="/getinvolved/integrityawards">Integrity awards</a></li>
                                                    <li class="last"><a href="/donate">Donate now</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
    
                                    <li class="nav-holder nav-news">
                                        <div class="nav-item sub-holder">
                                            <a class="nav-label headerMedium" href="/news/1/">News</a>
                                            <div class="nav-sub">
                                              
                                                <ul>
                                                    <li><a href="/news/">News home</a></li>
                                                    <li><a href="/news/features/">Features</a></li>
                                                    <li><a href="/news/pressreleases/">Press releases</a></li>
                                                    <li><a href="/news/blog/">Blog</a></li>
    
    
                                                    <li><a href="/news/dcn">Corruption news</a></li>
                                                    <li><a href="/news/stories/">True stories</a></li>
                                                    <li><a href="/whatwedo/publications">Publications</a></li>
                                                    <li><a href="/news/speeches">Speeches and opinion</a></li>
                                                    <li><a href="/news/events">Events</a></li>
                                                    <li class="last"><a href="/news/multimedia">Multimedia</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
    
                                    <li class="nav-holder nav-donate">
                                        <div class="nav-item">
                                            <a class="nav-label headerMedium" href="/donate">Donate</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
    as you may see in the picture...
    menu dropdown.jpg
    Last edited by Paul O'B; Dec 24, 2012 at 04:34. Reason: code tags added

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,


    You can hide the menu off-screen initially (better than display:none for lots of reasons) and then on hover bring it back.

    e.g.
    Code:
    #nav .nav-sub {
    position:absolute;
    margin-left:-999em;/* hide the sub menu*/
    }
    #nav li:hover .nav-sub{margin-left:0}/* bring it back */

  6. #6
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help.. it is so useful with a small trick


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
  •