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