dropdown menu CSS help!

**somvannda** · Dec 24, 2012 01:09

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.

**ralph.m** · Dec 24, 2012 02:06

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>

**somvannda** · Dec 24, 2012 02:21

i did add them but nothing work

**somvannda** · Dec 24, 2012 02:24

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

**Paul O'B** · Dec 24, 2012 04:41

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 */

**somvannda** · Dec 24, 2012 20:13

Thank you for your help.. it is so useful with a small trick

User Tag List

Thread: dropdown menu CSS help!

Thread Tools

Display

dropdown menu CSS help!

Bookmarks

Bookmarks

Posting Permissions