Drop down list using CSS

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • vishalz
    New Member
    • Feb 2008
    • 2

    Drop down list using CSS

    Can any one tell me how to add style to drop down menu. Css styles like changing border color, background color , giving alternate color in the options etc.
  • harshmaul
    Recognized Expert Contributor
    • Jul 2007
    • 490

    #2
    Have you already made the drop down using css or do you need to know how to do it?

    Comment

    • vishalz
      New Member
      • Feb 2008
      • 2

      #3
      Originally posted by harshmaul
      Have you already made the drop down using css or do you need to know how to do it?
      Hi,
      I want to know how to use it and if possible how can we have multiple levels it it. for e.g.

      Section A( as heading)
      option 1 (as option under section A)
      option 2 (as option under section A)
      Section B( as heading)
      option 1 (as option under section B)
      option 2 (as option under section B)

      Comment

      • harshmaul
        Recognized Expert Contributor
        • Jul 2007
        • 490

        #4
        Hi Try this

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
        <title>css hover</title>
        <style type="text/css">
        #menu ul .item{display:none;}
        #menu ul:hover .item{display:block;}
        #menu ul{float:left;list-style:none;}
        </style>
        
        </head>
        <body>
        <div id="menu">
        <ul>
        <li class="top">My affiliates</li>
        <li class="item"><a href="http://www.google.com/">google</a></li>
        <li class="item"><a href="http://www.thescripts.com/">theScripts</a></li>
        </ul>
        <ul>
        <li class="top">My News Articles</li>
        <li class="item"><a href="#">Story 1</a></li>
        <li class="item"><a href="#">Story 2</a></li>
        <li class="item"><a href="#">Story 1</a></li>
        <li class="item"><a href="#">Story 2</a></li>
        </ul>
        </div>
        </body>
        </html>

        Comment

        • npidaparthy
          New Member
          • Feb 2008
          • 14

          #5
          try the followng code for adding color for the drop down by using CSS

          [CODE=HTML]

          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

          <HTML>
          <HEAD> <TITLE> CSS Example </TITLE>

          <style type="text/css">
          .altTextField {
          background-color: lightblue;
          font-family: verdana;
          font-size: 09pt;
          color: red
          height: 5pt
          width:6pt
          border:0px;
          }
          </style>

          </HEAD>
          <BODY>
          <FORM name="example" action="" method="POST" >

          DropDown : <SELECT size=1 width=10 name=dropMenu class="altTextF ield">
          <option value=0>Option-1</option>
          <option value=1>Option-2</option>
          <option value=2>Option-3</option>
          </SELECT>

          </FORM>
          </BODY>
          </HTML>

          [/CODE]

          Comment

          • harshmaul
            Recognized Expert Contributor
            • Jul 2007
            • 490

            #6
            Hi everybody!
            LOL, i just realised that theres more than one type of drop down. Poster please specify which one you want!

            the one i wrote is for a menu navigation system, And the one the other poster wrote was for form submission.

            Choose you weapon!

            Comment

            Working...