How to set css class to datalist?

Question

Everything works fine, except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do that?

<div id="cssmenu">
  <ul>
    <li><a href='SurveyorHome.aspx'><span>Home</span></a>
    </li>
    <li><a href='GENERATE_CLAIM.aspx'><span>Generate New Claim</span></a>
    </li>
    <li><a href='Add_Trainee.aspx'><span>Add Trainee</span></a>
    </li>
    <li><a href='AssignTrainee.aspx'><span>Assign Task </span></a>
    </li>
    <li><a href='AssignTask.aspx'><span>Assigned Tasks</span></a>
    </li>
    <li><a href='ShowTraineeReport.aspx'><span>Connectivity Report</span></a>
    </li>
    <li>
      <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/SurvayorDocument.aspx">
        <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="My Documents" Font-Names="Arial" Font-Size="10pt" ForeColor="White" Style="text-decoration: none;"></asp:Label>
      </asp:HyperLink>
    </li>

    <li><a href='SurveyorAllClaims.aspx'><span>All Claims Status</span></a>
    </li>
    <li><a href='SurveyVisits.aspx'><span>Add Survey Visits</span></a>
    </li>




    <li class="active has-sub"><a href='Surveyor-Dashboard.aspx?Type=Motor'><span>Motor</span></a>
      <ul>
        <li class="last"><a href='JIR-rpt.aspx?Type=Motor'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Motor'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Motor'><span>LOR</span></a>
        </li>
        <li class="last"><a href='View-my-claims.aspx?Type=Motor'><span>View My Claims</span></a>
        </li>
        <li class="l ast"><a href='FSR-rpt.aspx?Type=Motor'><span>FSR</span></a>
        </li>
        <li class="last"><a href='SurveyorClaimBills.aspx?Type=Motor'><span>Motor Survey Bill</span></a>
        </li>

      </ul>
    </li>
    <li class="active has-sub"><a href='#'><span>Marine</span></a>
      <ul>
        <li class="last"><a href='JIR-rpt.aspx?Type=Marine'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Marine'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Marine'><span>LOR</span></a>
        </li>
        <li class="last"><a href='SurveyorMarineClaims.aspx'><span>View My Claims / FSR</span></a>
        </li>
        <li class="l ast"><a href='SurveyorClaimBills.aspx?Type=Marine'><span>Survey Bill</span></a>
        </li>


      </ul>
    </li>
    <li class="active has-sub"><a href='#'><span>Non-Marine</span></a>
      <ul>
        <li class="last"><a href='NonMarineJIRList.aspx'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Non-Marine'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Non-Marine'><span>LOR</span></a>
        </li>
        <li class="last"><a href='FSR-rpt.aspx?Type=Non-Marine'><span>FSR</span></a>
        </li>
        <li class="last"><a href='SurveyorClaimBills.aspx?Type=NonMarine'><span>Non Marine Survey Bill</span></a>
        </li>


      </ul>
    </li>

  </ul>

  <ul>
    <asp:DataList ID="dlMenu" CssClass="active has-sub" runat="server" OnItemDataBound="dlMenu_ItemDataBound" RepeatColumns="1" RepeatDirection="Vertical" OnItemCommand="dlMenu_ItemCommand" Height="16px">
      <ItemTemplate>

        <li class="active has-sub">

          <asp:LinkButton ID="lnk_menu" class="active has-sub" runat="server" Text='<%# Eval("MenuName") %>' CommandName="Click" Style="text-decoration: none;" Font-Bold="True" Font-Names="Arial" ForeColor="Black" CssClass="linkbtn"></asp:LinkButton>

          <li class="active has-sub">
            <a href="<%# Eval(" MenuName ") %>"></a>
          </li>
        </li>
  </ul>

  <asp:HiddenField ID="hfId" runat="server" Value='<%#Eval("ID")%>' />

  <asp:Repeater ID="rptGadget" runat="server">
    <ItemTemplate>
      <li class="active has-sub">
        <ul>
          <li class="last">

            <a href='<%#Eval("SubmenuURL")%>'>
              <%#Eval( "SubmenuName")%>
            </a>
            <br />
          </li>
        </ul>
      </li>
    </ItemTemplate>
  </asp:Repeater>
  </ItemTemplate>
  </asp:DataList>
  </ul>

</div>

Answer 1

#cssmenu > ul > li {
    padding: 10px 0;
}

Answer 2

Between menu* items ( li ):

li{
   margin:50px 0;
}

Between menus* ( ul ):

ul{
   margin:50px 0;
}

To apply this only for children of #cssmenu , prepend #cssmenu to the rule

If you cant change the CSS in an external file, inline would be to add style="margin:50px 0;" to the appropriate elements.

^{*menu = unordered list, 50px used for example purposes}