طريقة إضافة قائمة css أنيقة

سلام عليكم اليوم طريقة إضافة قائمة css أنيقة 
 1*ندهب إلى
 لوحة التحكم / التخطيط / إختار المكان المناسب /Html/javaScript

       

<style>

        /* by.http://toprofessionalism.blogspot.com/ */
        #cssmenu {
          padding: 0;
          margin: 0;
          border: 0; }
        #cssmenu ul, #cssmenu li {
          list-style: none;
          margin: 0;
          padding: 0; }
        #cssmenu ul {
          position: relative;
          z-index: 597; }
        #cssmenu ul li {
          float: right;
          min-height: 1px;
          vertical-align: middle; }
        #cssmenu ul li.hover,
        #cssmenu ul li:hover {
          position: relative;
          z-index: 599;
          cursor: default; }
        #cssmenu ul ul {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
          width: 100%; }
        #cssmenu ul ul li {
          float: none; }
        #cssmenu ul ul ul {
          top: 0;
          left: auto;
          right: -99.5%; }
        #cssmenu ul li:hover > ul {
          visibility: visible; }
        #cssmenu ul ul {
          bottom: 0;
          left: 0; }
        #cssmenu ul ul {
          margin-top: 0; }
        #cssmenu ul ul li {
          font-weight: normal; }
        #cssmenu a {
          display: block;
          line-height: 1em;
          text-decoration: none; }
        /* by.mdwanblog.blogspot.com */
        #cssmenu {
          background: #333;
          border-bottom: 4px solid #1b9bff;
          font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
          font-size: 12px; }
          #cssmenu > ul {
            *display: inline-block; }
          #cssmenu:after, #cssmenu ul:after {
            content: '';
            display: block;
            clear: both; }
          #cssmenu ul {
            text-transform: uppercase; }
            #cssmenu ul ul {
              border-top: 4px solid #1b9bff;
              text-transform: none;
              min-width: 190px; }
              #cssmenu ul ul a {
                background: #1b9bff;
                color: #FFF;
                border: 1px solid #0082e7;
                border-top: 0 none;
                line-height: 150%;
                padding: 16px 20px; }
              #cssmenu ul ul ul {
                border-top: 0 none; }
              #cssmenu ul ul li {
                position: relative; }
                #cssmenu ul ul li:first-child > a {
                  border-top: 1px solid #0082e7; }
                #cssmenu ul ul li:hover > a {
                  background: #35a6ff; }
                #cssmenu ul ul li:last-child > a {
                  -moz-border-radius: 0 0 3px 3px;
                  -webkit-border-radius: 0 0 3px 3px;
                  border-radius: 0 0 3px 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box;
                  -moz-box-shadow: 0 1px 0 #1b9bff;
                  -webkit-box-shadow: 0 1px 0 #1b9bff;
                  box-shadow: 0 1px 0 #1b9bff; }
                #cssmenu ul ul li:last-child:hover > a {
                  -moz-border-radius: 0 0 0 3px;
                  -webkit-border-radius: 0 0 0 3px;
                  border-radius: 0 0 0 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box; }
                #cssmenu ul ul li.has-sub > a:after {
                  content: '+';
                  position: absolute;
                  top: 50%;
                  right: 15px;
                  margin-top: -8px; }
            #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
              background: #1b9bff;
              color: #FFF; }
            #cssmenu ul li.has-sub > a:after {
              content: '+';
              margin-left: 5px; }
            #cssmenu ul li.last ul {
              left: auto;
              right: 0; }
              #cssmenu ul li.last ul ul {
                left: auto;
                right: 99.5%; }
          #cssmenu a {
            background: #333;
            color: #CBCBCB;
            padding: 0 20px; }
          #cssmenu > ul > li > a {
            line-height: 48px; }
    </style>
    <!--by.mdwanblog.blogspot.com-->
        <div id='cssmenu'>
        <ul>
           <li class='active'><a href='#'><span>الرئيسية</span></a></li>
           <li class='has-sub'><a href='#'><span>منسدلة</span></a>
              <ul>
                 <li class='has-sub'><a href='#'><span>رابط</span></a>
                    <ul>
                       <li><a href='#'><span>رابط</span></a></li>
                       <li class='last'><a href='#'><span>مدونة مدون</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>
                    <ul>
                       <li><a href='#'><span>جديد</span></a></li>
                       <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li><a href='#'><span>عن مدوّن</span></a></li>
           <li class='last'><a href='#'><span>بلوجر</span></a></li>
        </ul>
        </div>
        <!--by.http://toprofessionalism.blogspot.com/-->