CSS Dropdown

Oct 9 2013 4:10 AM

Hi everyone

I have this CSS for Dropdown menu downloaded from Menucool

/* Generated by www.menucool.com/drop-down-menu */

/* main menu
----------------------------*/
#ddmenu
{
    display:block;
    font-family:Georgia;
    text-align:left;
    letter-spacing:normal;
}

#ddmenu ul
{
    width:10%;
    margin:0; /*If above width is not 100% and you want this menu to align in the center of its container, set it as { margin: 0 auto; }*/
    padding:0;
    background:transparent;
    border:0px solid #000000;
    display:inline-block;
    list-style:none;
    position:relative;
    font-size:0;
    z-index:999999990;


}

#ddmenu li
{
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;
    color:#000000;
}

#ddmenu a
{
    color: #000000;
    padding: 0 28px;
    line-height: 48px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    outline: 0;
    position: relative;
    white-space: nowrap;
}

#ddmenu li.over
{
    z-index:9999999998;
}

/* links without sub-menu */
#ddmenu li.over a
{
    background-color:#FFFFFF;

    color:#000000;
}

/* links with sub-menu */
#ddmenu a.arrow
{
    background-image:url(arrow2.gif);
    background-repeat:no-repeat;
    background-position:right center;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
}
#ddmenu li.over a.arrow
{
    background-color:#FFFFFF;
    color:#000000;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    z-index:9999999999;
    /*text-decoration:underline;*/
}

#ddmenu div
{
    padding:0;
    margin:0;
}

/* sub-menu layout
----------------------------*/


#ddmenu div.drop
{
    position:absolute;
    text-align:left;
    border:0px solid #000000;
    background:#FFFFFF;
    padding:20px;
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:Verdana;
    font-weight:bold;

    -box-shadow: 0px 12px 20px #EEEEEE;
}

#ddmenu div
{
    display:none;
}
/* sub-menu offset
----------------------------*/

#ddmenu div.drop
{
    left:0px;/*Use this property to change offset of the sub-menu*/
}
#ddmenu div.dropToLeft
{
    left:auto; right:0px;
}
#ddmenu div.dropToLeft2
{
    left:auto; right:-120px;
}

/* links in sub menu
----------------------------*/

#ddmenu div.drop a
{
    line-height:20px;
    font-size:27px;
    font-family:Verdana;
    font-weight:bold;
    color:#000000;
    text-decoration:none;
    display:block;
    text-align:left;
    position:static;
    background:none;
    background-image:none;
    padding:0 0;
}

#ddmenu div.drop a:hover
{
    text-decoration:none;
    color:#CC0000;
}

/* blocks within the sub-menu
----------------------------*/

#ddmenu div.drop div
{
    background:none;
}

#ddmenu div.column
{
    width:auto;
    float:left; /*align each column in one row*/
    padding:0 10px; /*padding of each column*/
}

#ddmenu div.column div
{
   padding:0px 40px; /*sub-div within div.column. 10px for indent.*/
}

/* useful when http://www.menucool.com/ddmenu/one-menu-for-all-pages
----------------------------*/
#ddmenuLink {display:none;}

I need to add space between the list Items but It's not taking the margin how can i do it also I need to add 2 lines to separate each item
one is above the item and the other is in the bottom of the item
my list is like this

<!DOCTYPE html>
<html>
<head>
    <title>Menucool Drop Down Menu</title>
    <link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
    <script src="ddmenu/ddmenu.js" type="text/javascript"></script>
</head>
<body style="padding:80px 20px;">
<nav id="ddmenu">
    <ul>

        <li>Home
            <div>
                <div class="column">
                    <a href="#">MY Garden</a>
                    <a href="#">TOBE & Friends</a>
                    <a href="#">Hobbies</a>
                    <a href="#">Travel</a>
                    <a href="#">Colors</a>

                </div>
            </div>
        </li>
        <li>About
            <div>
                <div class="column">
                    <a href="#">ME</a>
                     <a href="#">School</a>

                </div>
            </div>
        </li>
    </ul>
</nav>

</body>
</html>

thanks

Answers (5)

Admin Panel In the Website

object-oriented system