Change Menu background color for N-Level using CSS in ASP.Net

Last Reply 17 days ago By dharmendr

Posted 17 days ago

hello

I am follwing this link Role based Authorization and Authentication in ASP.Net

i have problem when i add more section i get white background color

my code from site.master

HTML 

 <style type="text/css">
    body{
        font-family: Arial;
        font-size: 12pt;
        font-weight: bold;
    }
    .main_menu{
        width: 105px;
        background-color: #0e5297;
        border: 0.5px solid #ccc !important; 
        color: #fff;
        text-align: center;
        height: 20px;
        line-height: 20px;
       

    }
    .level_menu{
        width: 125px;
        background-color: #0e5297; 
        color: #fff;
        border: 0.5px solid #ccc !important;
        text-align: center;
        height: 20px;
        line-height: 20px;
      

    }
    .selected{
        background-color: #0a6eb2;
        color: #fff;

    }
    input[type=text], input[type=password]{
        width: 200px;

    }
    table{
        border: 1px solid #ccc;

    }
    table th {
        background-color: #0e5297;
        color: #ffffff;
        font-weight: bold;

    }
    table th, table td { 
        padding: 5px; 
        border-color: #ccc;

    }
</style>

 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="" title="إدارة الحدمات العامة" description="" roles ="*">
    <siteMapNode url="~/Admin/Webform1.aspx" title="بيانات الموظفين" roles="Administrator">
   </siteMapNode>
      <siteMapNode url ="javascript:;" title="نماذج الادارة" roles = "Administrator" >
        <siteMapNode url ="~/Admin/Vacations.aspx" title="الاجازات"></siteMapNode>
        <siteMapNode url ="~/Admin/spadd.aspx" title="المهام الرسمية والخاصة"></siteMapNode>
        <siteMapNode url ="~/Admin/Webform4.aspx" title="بدل موقع"></siteMapNode>
        <siteMapNode url ="~/Admin/WebForm7.aspx" title="الوظائف الفنية"></siteMapNode>
        <siteMapNode url ="~/Admin/order.aspx" title="كشف الحضور والإنصراف"></siteMapNode>
        <siteMapNode url ="~/Admin/News.aspx" title="News"></siteMapNode>
        <siteMapNode url ="~/Admin/ReportUserz.aspx" title="مراقبة النماذج"></siteMapNode>
        <siteMapNode url ="~/Admin/uploadcivilid.aspx" title="البطاقة المدنية"></siteMapNode>
         <siteMapNode url="javascript2:;" title="الصادر والوارد" roles="Administrator">
        <siteMapNode url ="~/Admin/SC_Form.aspx" title="الوارد" description="الوارد"></siteMapNode>
        <siteMapNode url ="~/Admin/SC_Form2.aspx" title="الصادر" description="الصادر"></siteMapNode>
      </siteMapNode>        
    </siteMapNode>
    <siteMapNode url ="~/Admin/Webform5.aspx" title="أسماءالموظفين" roles="Administrator" />
    <siteMapNode url ="~/Medical.aspx" title="الاجازات المرضية" roles="Administrator" />
    <siteMapNode url ="~/Admin/manager.aspx" title="إجتماعات المدير" roles="Administrator" />
    <siteMapNode url="javascript3:;" title="عقود الادارة" roles="Administrator">
      <siteMapNode url ="javascript6:;" title=" الصيانية" roles="Administrator"> </siteMapNode>
        <siteMapNode url ="javascript7:;" title=" النظافة والزراعة" roles="Administrator"> </siteMapNode>
      <siteMapNode url ="javascript4:;" title="الشؤون الهندسية" roles="Administrator">
        <siteMapNode url ="~/Eng/eng1.aspx" title="شركة كاظمة"></siteMapNode>
        <siteMapNode url ="~/Eng/eng2.aspx" title="شركة كي سي سي"></siteMapNode>
        <siteMapNode url ="~/Eng/eng5.aspx" title="شركة الكويتية اليابانية"></siteMapNode>
        <siteMapNode url ="~/Eng/eng6.aspx" title="مكتب سلمان الشلاحي"></siteMapNode>
         <siteMapNode url ="javascript5:;" title="شركة واراة" roles="Administrator">
        <siteMapNode url ="~/Eng/eng7.aspx" title="العاصمة / الفروانية / الجهراء"></siteMapNode>
        <siteMapNode url ="~/Eng/eng8.aspx" title="حولي / مبارك الكبير / الاحمدي"></siteMapNode>
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
  </siteMapNode> 
</siteMap>

screenshoot 

https://i.ibb.co/GHwzsw4/2021-02-18-20-38-24.png

You are viewing reply posted by: dharmendr 17 days ago.
Posted 17 days ago

Use below css.

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 12pt;
        font-weight: bold;
    }

    .main_menu {
        width: 105px;
        background-color: #0e5297;
        border: 0.5px solid #ccc !important;
        color: #fff;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }

    .level_menu {
        width: 125px;
        background-color: #0e5297;
        color: #fff;
        border: 0.5px solid #ccc !important;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }

    .level3, .level4, .level5 {
        width: 125px;
        background-color: #0e5297;
        color: #fff;
        border: 0.5px solid #ccc !important;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }

    .selected {
        background-color: #0a6eb2;
        color: #fff;
    }

    input[type=text], input[type=password] {
        width: 200px;
    }

    table {
        border: 1px solid #ccc;
    }

        table th {
            background-color: #0e5297;
            color: #ffffff;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border-color: #ccc;
        }
</style>