How to do Dropsown menu in CSS?

mohansinfh · January 2, 2011, 1:21pm

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?

The background-color of the menu is currently black, but I like to be it white, and the menu color should be black.
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…

ralphm · January 2, 2011, 1:23pm

OK mohansinfh, show us the code you have so far, so that we can show you how to modify it.

mohansinfh · January 2, 2011, 1:33pm

Thank you sir.
I got the Code from here.

PaulOB · January 2, 2011, 2:18pm

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.



ul.dropdown li {
   [B] background-color: #FFF;
    color: #000;[/B]
    padding: 7px 12px;
}

ul.dropdown a:link, ul.dropdown a:visited {
    [B]color: #000000;[/B]
    text-decoration: none;
}

mohansinfh · January 2, 2011, 2:41pm

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.

PaulOB · January 2, 2011, 3:26pm

I’d really need to see the code you are using but here is a basic working demo cut down from the code above.


<!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 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

mohansinfh · January 5, 2011, 9:22am

Thank you sir.
I am grateful to you.
It worked…