Tema: Alinear último 'li' a la derecha de 'ul' en un menú horizontal
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/11/2015, 10:06
Bugger
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 13 años, 7 meses
Puntos: 17
Pregunta Alinear último 'li' a la derecha de 'ul' en un menú horizontal
Hola,
antes de nada, agradecer el interés desinteresado por ayudar.

estoy usando el siguiente menú: http://cssmenumaker.com/menu/responsive-flat-menu

como podría alinear el último 'li', para quedara a la derecha del todo?

he probado con el siguiente código pero no llego a conseguir lo que busco (css no es mi fuerte)
Código CSS: 
Ver original
  1. #cssmenu ul li.last {
  2.     margin-left: auto;
  3. }
  4.  
  5. #cssmenu li:last-of-type{
  6.     margin-left: auto;
  7. }

el código original es el siguiente
Código HTML: 
Ver original
  1. <div id='cssmenu'>
  2.         <ul>
  3.            <li class='active'><a href='#'>Home</a></li>
  4.            <li><a href='#'>Products</a>
  5.               <ul>
  6.                  <li><a href='#'>Product 1</a>
  7.                     <ul>
  8.                        <li><a href='#'>Sub Product</a></li>
  9.                        <li><a href='#'>Sub Product</a></li>
  10.                     </ul>
  11.                  </li>
  12.                  <li><a href='#'>Product 2</a>
  13.                     <ul>
  14.                        <li><a href='#'>Sub Product</a></li>
  15.                        <li><a href='#'>Sub Product</a></li>
  16.                     </ul>
  17.                  </li>
  18.               </ul>
  19.            </li>
  20.            <li><a href='#'>About</a></li>
  21.            <li><a href='#'>Contact</a></li>
  22.         </ul>
  23.         </div>

Código CSS: 
Ver original
  1. body
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5.     font: 12px Tahoma, Arial, sans-serif;    
  6. }
  7. #cssmenu,
  8. #cssmenu ul,
  9. #cssmenu ul li,
  10. #cssmenu ul li a,
  11. #cssmenu #menu-button {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     list-style: none;
  16.     line-height: 1;
  17.     display: block;
  18.     position: relative;
  19.     -webkit-box-sizing: border-box;
  20.     -moz-box-sizing: border-box;
  21.     box-sizing: border-box;
  22. }
  23. #cssmenu:after,
  24. #cssmenu > ul:after {
  25.     content: ".";
  26.     display: block;
  27.     clear: both;
  28.     visibility: hidden;
  29.     line-height: 0;
  30.     height: 0;
  31. }
  32. #cssmenu #menu-button {
  33.     display: none;
  34. }
  35. #cssmenu {
  36.     font-family: Tahoma, Arial, sans-serif;
  37.     font-size: 12px; 
  38.     background: #3C3C3C;
  39. }
  40. #cssmenu > ul > li {
  41.     float: left;
  42. }
  43. #cssmenu ul li:hover > a,
  44. #cssmenu ul li.active > a {
  45.   background: #4989c8;
  46.   color: #ffffff;
  47. }
  48. #cssmenu.align-center > ul {
  49.   font-size: 0;
  50.   text-align: center;
  51. }
  52. #cssmenu.align-center > ul > li {
  53.   display: inline-block;
  54.   float: none;
  55. }
  56. #cssmenu.align-center ul ul {
  57.   text-align: left;
  58. }
  59. #cssmenu.align-right > ul > li {
  60.   float: right;
  61. }
  62. #cssmenu > ul > li > a {
  63.   padding: 17px;
  64.   font-size: 12px;
  65.   letter-spacing: 1px;
  66.   text-decoration: none;
  67.   color: #dddddd;
  68.   font-weight: 700;
  69.   text-transform: uppercase;
  70. }
  71. #cssmenu > ul > li:hover > a {
  72.     background-color: #4989c8;
  73.     color: #ffffff;
  74. }
  75. #cssmenu > ul > li.has-sub > a {
  76.   padding-right: 30px;
  77. }
  78. #cssmenu > ul > li.has-sub > a:after {
  79.   position: absolute;
  80.   top: 22px;
  81.   right: 11px;
  82.   width: 8px;
  83.   height: 2px;
  84.   display: block;
  85.   background: #dddddd;
  86.   content: '';
  87. }
  88. #cssmenu > ul > li.has-sub > a:before {
  89.   position: absolute;
  90.   top: 19px;
  91.   right: 14px;
  92.   display: block;
  93.   width: 2px;
  94.   height: 8px;
  95.   background: #dddddd;
  96.   content: '';
  97.   -webkit-transition: all .25s ease;
  98.   -moz-transition: all .25s ease;
  99.   -ms-transition: all .25s ease;
  100.   -o-transition: all .25s ease;
  101.   transition: all .25s ease;
  102. }
  103. #cssmenu > ul > li.has-sub:hover > a:before {
  104.   top: 23px;
  105.   height: 0;
  106. }
  107. #cssmenu ul ul {
  108.   position: absolute;
  109.   left: -9999px;
  110. }
  111. #cssmenu.align-right ul ul {
  112.   text-align: right;
  113. }
  114. #cssmenu ul ul li {
  115.   height: 0;
  116.   -webkit-transition: all .25s ease;
  117.   -moz-transition: all .25s ease;
  118.   -ms-transition: all .25s ease;
  119.   -o-transition: all .25s ease;
  120.   transition: all .25s ease;
  121. }
  122. #cssmenu li:hover > ul {
  123.   left: auto;
  124. }
  125. #cssmenu.align-right li:hover > ul {
  126.   left: auto;
  127.   right: 0;
  128. }
  129. #cssmenu li:hover > ul > li {
  130.   height: 35px;
  131. }
  132. #cssmenu ul ul ul {
  133.   margin-left: 100%;
  134.   top: 0;
  135. }
  136. #cssmenu.align-right ul ul ul {
  137.   margin-left: 0;
  138.   margin-right: 100%;
  139. }
  140. #cssmenu ul ul li a {
  141.   border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  142.   padding: 11px 15px;
  143.   width: 170px;
  144.   font-size: 12px;
  145.   text-decoration: none;
  146.   color: #dddddd;
  147.   font-weight: 400;
  148.   background: #3C3C3C;
  149. }
  150. #cssmenu ul ul li:last-child > a,
  151. #cssmenu ul ul li.last-item > a {
  152.   border-bottom: 0;
  153. }
  154. #cssmenu ul ul li:hover > a,
  155. #cssmenu ul ul li a:hover {
  156.   color: #ffffff;
  157.   background-color: #4989c8;
  158. }
  159. #cssmenu ul ul li.has-sub > a:after {
  160.   position: absolute;
  161.   top: 16px;
  162.   right: 11px;
  163.   width: 8px;
  164.   height: 2px;
  165.   display: block;
  166.   background: #dddddd;
  167.   content: '';
  168. }
  169. #cssmenu.align-right ul ul li.has-sub > a:after {
  170.   right: auto;
  171.   left: 11px;
  172. }
  173. #cssmenu ul ul li.has-sub > a:before {
  174.   position: absolute;
  175.   top: 13px;
  176.   right: 14px;
  177.   display: block;
  178.   width: 2px;
  179.   height: 8px;
  180.   background: #dddddd;
  181.   content: '';
  182.   -webkit-transition: all .25s ease;
  183.   -moz-transition: all .25s ease;
  184.   -ms-transition: all .25s ease;
  185.   -o-transition: all .25s ease;
  186.   transition: all .25s ease;
  187. }
  188. #cssmenu.align-right ul ul li.has-sub > a:before {
  189.   right: auto;
  190.   left: 14px;
  191. }
  192. #cssmenu ul ul > li.has-sub:hover > a:before {
  193.   top: 17px;
  194.   height: 0;
  195. }
  196. @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  197.   #cssmenu {
  198.     width: 100%;
  199.   }
  200.   #cssmenu ul {
  201.     width: 100%;
  202.     display: none;
  203.   }
  204.   #cssmenu.align-center > ul {
  205.     text-align: left;
  206.   }
  207.   #cssmenu ul li {
  208.     width: 100%;
  209.     border-top: 1px solid rgba(120, 120, 120, 0.2);
  210.   }
  211.   #cssmenu ul ul li,
  212.   #cssmenu li:hover > ul > li {
  213.     height: auto;
  214.   }
  215.   #cssmenu ul li a,
  216.   #cssmenu ul ul li a {
  217.     width: 100%;
  218.     border-bottom: 0;
  219.   }
  220.   #cssmenu > ul > li {
  221.     float: none;
  222.   }
  223.   #cssmenu ul ul li a {
  224.     padding-left: 25px;
  225.   }
  226.   #cssmenu ul ul ul li a {
  227.     padding-left: 35px;
  228.   }
  229.   #cssmenu ul ul li a {
  230.     color: #dddddd;
  231.     background: none;
  232.   }
  233.   #cssmenu ul ul li:hover > a,
  234.   #cssmenu ul ul li.active > a {
  235.     color: #ffffff;   
  236.   }
  237.   #cssmenu ul ul,
  238.   #cssmenu ul ul ul,
  239.   #cssmenu.align-right ul ul {
  240.     position: relative;
  241.     left: 0;
  242.     width: 100%;
  243.     margin: 0;
  244.     text-align: left;
  245.   }
  246.   #cssmenu > ul > li.has-sub > a:after,
  247.   #cssmenu > ul > li.has-sub > a:before,
  248.   #cssmenu ul ul > li.has-sub > a:after,
  249.   #cssmenu ul ul > li.has-sub > a:before {
  250.     display: none;
  251.   }
  252.   #cssmenu #menu-button {
  253.     display: block;
  254.     padding: 17px;
  255.     color: #dddddd;
  256.     cursor: pointer;
  257.     font-size: 12px;
  258.     text-transform: uppercase;
  259.     font-weight: 700;
  260.   }
  261.   #cssmenu #menu-button:after {
  262.     position: absolute;
  263.     top: 22px;
  264.     right: 17px;
  265.     display: block;
  266.     height: 4px;
  267.     width: 20px;
  268.     border-top: 2px solid #dddddd;
  269.     border-bottom: 2px solid #dddddd;
  270.     content: '';
  271.   }
  272.   #cssmenu #menu-button:before {
  273.     position: absolute;
  274.     top: 16px;
  275.     right: 17px;
  276.     display: block;
  277.     height: 2px;
  278.     width: 20px;
  279.     background: #dddddd;
  280.     content: '';
  281.   }
  282.   #cssmenu #menu-button.menu-opened:after {
  283.     top: 23px;
  284.     border: 0;
  285.     height: 2px;
  286.     width: 15px;
  287.     background: #ffffff;
  288.     -webkit-transform: rotate(45deg);
  289.     -moz-transform: rotate(45deg);
  290.     -ms-transform: rotate(45deg);
  291.     -o-transform: rotate(45deg);
  292.     transform: rotate(45deg);
  293.   }
  294.   #cssmenu #menu-button.menu-opened:before {
  295.     top: 23px;
  296.     background: #ffffff;
  297.     width: 15px;
  298.     -webkit-transform: rotate(-45deg);
  299.     -moz-transform: rotate(-45deg);
  300.     -ms-transform: rotate(-45deg);
  301.     -o-transform: rotate(-45deg);
  302.     transform: rotate(-45deg);
  303.   }
  304.   #cssmenu .submenu-button {
  305.     position: absolute;
  306.     z-index: 99;
  307.     right: 0;
  308.     top: 0;
  309.     display: block;
  310.     border-left: 1px solid rgba(120, 120, 120, 0.2);
  311.     height: 46px;
  312.     width: 46px;
  313.     cursor: pointer;
  314.   }
  315.   #cssmenu .submenu-button.submenu-opened {
  316.     background: #262626;
  317.   }
  318.   #cssmenu ul ul .submenu-button {
  319.     height: 34px;
  320.     width: 34px;
  321.   }
  322.   #cssmenu .submenu-button:after {
  323.     position: absolute;
  324.     top: 22px;
  325.     right: 19px;
  326.     width: 8px;
  327.     height: 2px;
  328.     display: block;
  329.     background: #dddddd;
  330.     content: '';
  331.   }
  332.   #cssmenu ul ul .submenu-button:after {
  333.     top: 15px;
  334.     right: 13px;
  335.   }
  336.   #cssmenu .submenu-button.submenu-opened:after {
  337.     background: #ffffff;
  338.   }
  339.   #cssmenu .submenu-button:before {
  340.     position: absolute;
  341.     top: 19px;
  342.     right: 22px;
  343.     display: block;
  344.     width: 2px;
  345.     height: 8px;
  346.     background: #dddddd;
  347.     content: '';
  348.   }
  349.   #cssmenu ul ul .submenu-button:before {
  350.     top: 12px;
  351.     right: 16px;
  352.   }
  353.   #cssmenu .submenu-button.submenu-opened:before {
  354.     display: none;
  355.   }
  356. }

Saludos y gracias
Última edición por Bugger; 26/11/2015 a las 10:50