How to create dropdown through List and Css?

Discussion in 'Website Development & Design' started by spyindiaankur, Nov 1, 2013.

  1. spyindiaankur

    spyindiaankur
    uix_expand uix_collapse
    Member

    Joined:
    Jul 13, 2013
    Messages:
    134
    Likes Received:
    9
    Can any one tell me the exact way of creating a dropdown menu through simple list and CSS coding?
     
  2. sudhakar1

    sudhakar1
    uix_expand uix_collapse
    Member

    Joined:
    Sep 9, 2013
    Messages:
    150
    Likes Received:
    6
    try do this coding,

    <div id="menu">
    <ul>
    <li></li>
    <li></li>
    <ul id="sub">
    <li></li>
    <li></li></ul>
    <ul id="second">
    <li></li></ul>
    <li></li>
    <li></li>
    <li> </li>
    </ul>
    </div>
    try do this css

    #menu{width:800px;height:82px;background-color:#666666;margin:0px 0px 0px 0px; border-radius:30px; text-align:center;}
    #menu ul {margin:0px;padding:0px;}
    #menu ul li{ border-radius:0px;float:left;list-style:none;margin:0px 4px 0px 4px; width:191px; padding-top:30px; height:50px;background-color:#99CC00; position:relative;}
    #menu ul li a{ text-decoration: none !important;}
    #menu ul li:hover{display:inline;background-color:#CCCCCC;border-radius:0px;margin:0px 4px 0px 4px; width:191px; height:45px;}


    /* first select menu */

    ul.sub li{ background-color:#00CCFF; display:inline; }
    ul.sub li{margin:25px 0px 0px 0px; padding:0px 10px 0px 0px; position:absolute; }
    .hover ul.sub li{ display: block;position:relative;/*relative*/ float:none; margin:0px 0px 0px 29px;
    padding:3px 2px 2px 0px; width:150px; height:20px; }

    /* second select menu */
    .second li{ display:none;position:relative; float:none; height:35px;
    margin:1px 0px 0px 8px; padding:10px 0px 10px 0px;}
    .second li{ display: block; background-color:red; }
    .second{ position:relative; height:35px; margin:0px 0px 0px 4px; padding:0px 0px 0px 0px;}
    /* end menu*/
     
  3. marriott

    marriott
    uix_expand uix_collapse
    Member

    Joined:
    Sep 20, 2013
    Messages:
    400
    Likes Received:
    11
    I agree with sudhakar1 he had given the right answer to your question and i think i would really helped you.
     
  4. bmwillsmith

    bmwillsmith
    uix_expand uix_collapse
    Member

    Joined:
    Jan 23, 2014
    Messages:
    380
    Likes Received:
    10
    I agree with the above clean and clear and simple tutorial how to create drop down menu. One thing you have to make sure, the sub menu UL position must be absolute and margin and padding should be correct as per design.
     

Share This Page