SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2010
    Location
    ONS
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do Dropsown menu in CSS?

    Hello Dear All,

    I want to do a little thing in drop-down menu, how to do this, I am new to CSS, please someone guide me?

    1. The background-color of the menu is currently black, but I like to be it white, and the menu color should be black.
    2. When we hover it, and mouse is on the options of the main menu, its background should become opposite(black) and the text should become(white).

    How to do this?

    Please help me....

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK mohansinfh, show us the code you have so far, so that we can show you how to modify it.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2010
    Location
    ONS
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sir.
    I got the Code from here.
    http://www.lwis.net/free-css-drop-do...adobe.com.html

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

    Ralph meant for you to show an example of how far you had got into the conversion process and not a link to someone else's demo

    We ask that you at least try yourself first so that 1) we can see what level you are at and b) you learn more by trying and failing

    In the menu you linked to the background colours for the top level menu only are here and you would adjust to suit.

    Code:
    ul.dropdown li {
        background-color: #FFF;
        color: #000;
        padding: 7px 12px;
    }
    
    ul.dropdown a:link, ul.dropdown a:visited {
        color: #000000;
        text-decoration: none;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2010
    Location
    ONS
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I am really sorry sir.
    But I want to learn almost all the things.. and I know you all can help me.
    I am asking everything without any hesitation, because I understand you all as my teacher, and a student never hesitates asking his/her teachers.

    I understand you want get that how much I learned, but sir my mind raised this quaetion to learn it first and thats I why I asked it...


    Sir, As you told, I did the same, but now what happens is,
    .

    How to overcome this problem sir. (To make the text color white, when background color becomes black- shown by first arrow.)
    I wanted to ask that..

    Thank you sir.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd really need to see the code you are using but here is a basic working demo cut down from the code above.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 50px;
        font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
    }
    ul.dropdown a:link, ul.dropdown a:visited {
        color: #000000;
        text-decoration: none;
    }
    ul.dropdown {
        font: bold 12px Arial, Helvetica, sans-serif;
    }
    ul.dropdown, ul.dropdown li, ul.dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 597;
        float: left;
    }
    ul.dropdown li {
        background: #fff;
        color: #000;
        float: left;
        line-height: 1.3em;
    }
    ul.dropdown li a{
      float:left;
        padding:7px 12px;
        background: #fff;
        color: #000;
    }
    ul.dropdown li.hover, ul.dropdown li:hover {
        z-index: 599;
        cursor: default;
    }
    ul.dropdown ul {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        margin-left:-999em;
        width: 170px;
        padding-bottom: 9px;
        background:#fff;
        color: #000;
        font-size: 11px;
        font-weight: normal;
    }
    ul.dropdown ul li,ul.dropdown li li a {
        float: none;
        display:block;
        zoom:1.0;
    }
    ul.dropdown li:hover ul, ul.dropdown li.hover ul {
        margin-left:-6px;
    }
    ul.dropdown li.hover a,  ul.dropdown li:hover a,
    ul.dropdown li.hover li.hover a,  ul.dropdown li:hover li:hover a {
        background: #000;
        color:#fff!important;/* combat ie6 link specificity error*/
    }
    ul.dropdown li:hover li a,  ul.dropdown li.hover li a  {
        background: #fff;
        color: #000!important;
    }
    
    
    
    
    </style>
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" hover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" hover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    
    
    </head>
    <body>
    <ul id="nav" class="dropdown dropdown-horizontal">
        <li><a href="./">Home</a></li>
        <li><a href="./" class="dir">Solutions</a>
            <ul>
                <li><a href="./">Broadcast and media</a></li>
                <li><a href="./">Education</a></li>
                <li><a href="./">Financial services</a></li>
                <li><a href="./">Government</a></li>
                <li><a href="./">Life sciences</a></li>
                <li><a href="./">Manufacturing</a></li>
                <li><a href="./">Consumer photo and video</a></li>
                <li><a href="./">Mobile</a></li>
                <li><a href="./">Print publishing</a></li>
                <li><a href="./">Pro photography</a></li>
                <li><a href="./">Professional video</a></li>
                <li><a href="./">Rich Internet applications</a></li>
                <li><a href="./">Technical communication</a></li>
                <li><a href="./">Training and eLearning</a></li>
                <li><a href="./">Web conferencing</a></li>
                <li><a href="./">Web publishing</a></li>
                <li><a href="./">All industries and solutions ›</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Products</a>
            <ul>
                <li><a href="./">Acrobat Connect Pro</a></li>
                <li><a href="./">Acrobat family</a></li>
                <li><a href="./">Adobe AIR</a></li>
                <li><a href="./">After Effects</a></li>
                <li><a href="./">ColdFusion</a></li>
                <li><a href="./">Creative Suite family</a></li>
                <li><a href="./">Dreamweaver</a></li>
                <li><a href="./">Flash</a></li>
                <li><a href="./">Flex</a></li>
                <li><a href="./">Illustrator</a></li>
                <li><a href="./">InDesign</a></li>
                <li><a href="./">LiveCycle Enterprise Suite</a></li>
                <li><a href="./">Mobile products</a></li>
                <li><a href="./">Photoshop family</a></li>
                <li><a href="./">Adobe Premiere Pro</a></li>
                <li><a href="./">Scene7 OnDemand</a></li>
                <li><a href="./">All products ›</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Support</a>
            <ul>
                <li><a href="./">Support home</a></li>
                <li><a href="./">Customer Service</a></li>
                <li><a href="./">Knowledgebase</a></li>
                <li><a href="./">Books</a></li>
                <li><a href="./">Training and certification</a></li>
                <li><a href="./">Support programs</a></li>
                <li><a href="./">Forums</a></li>
                <li><a href="./">Documentation</a></li>
                <li><a href="./">Updates</a></li>
                <li><a href="./">More ›</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Communities</a>
            <ul>
                <li><a href="./">Designers</a></li>
                <li><a href="./">Developers</a></li>
                <li><a href="./">Educators and students</a></li>
                <li><a href="./">Partners</a></li>
                <li><a href="./">Adobe Labs</a></li>
                <li><a href="./">Adobe TV</a></li>
                <li><a href="./">Forums</a></li>
                <li><a href="./">Exchange</a></li>
                <li><a href="./">Blogs</a></li>
                <li><a href="./">Experience Design</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Company</a>
            <ul>
                <li><a href="./">About Adobe</a></li>
                <li><a href="./">Press</a></li>
                <li><a href="./">Investor Relations</a></li>
                <li><a href="./">Corporate Affairs</a></li>
                <li><a href="./">Careers</a></li>
                <li><a href="./">Showcase</a></li>
                <li><a href="./">Events</a></li>
                <li><a href="./">Contact Adobe</a></li>
                <li><a href="./">Become an affiliate</a></li>
                <li><a href="./">More ›</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Downloads</a>
            <ul>
                <li><a href="./">Downloads home</a></li>
                <li><a href="./">Trial downloads</a></li>
                <li><a href="./">Updates</a></li>
                <li><a href="./">Exchange</a></li>
                <li><a href="./">Get Adobe Reader</a></li>
                <li><a href="./">Get Flash Player</a></li>
                <li><a href="./">Get Adobe AIR</a></li>
                <li><a href="./">Get Shockwave Player</a></li>
                <li><a href="./">Get Media Player</a></li>
                <li><a href="./">More ›</a></li>
            </ul>
        </li>
        <li><a href="./" class="dir">Store</a>
            <ul>
                <li><a href="./">Store home</a></li>
                <li><a href="./">Software</a></li>
                <li><a href="./">Fonts</a></li>
                <li><a href="./">Books</a></li>
                <li><a href="./">Support programs</a></li>
                <li><a href="./">Your account</a></li>
                <li><a href="./">Volume licensing</a></li>
                <li><a href="./">Store offers</a></li>
                <li><a href="./">Other ways to buy ›</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2010
    Location
    ONS
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sir.
    I am grateful to you.
    It worked..


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
  •