SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  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


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
  •