Archives : Juillet 2016 - Tutorial, CSS, HTML

Par GloriaV dans Musica le 31 Juillet 2016 à 12:07

votre commentaire

Par GloriaV dans Menu le 31 Juillet 2016 à 11:19

Horizontal 2 niveles (en Eklablog no funciona)

 <nav class="wrapper">
  <ul class="main">
    <li class="front"><a href="#">Item</a></li>
    <li class="front"><a href="#">Item</a></li>
    <li class="front"><a href="#">Hover</a>
      <!--2---------------> 
       <ul class="sub">
        <li class="bottom"><a href="#">Sub Item</a></li>
        <li class="bottom"><a href="#">Sub Item</a></li>
        <li class="bottom"><a href="#">Sub Item</a></li>
      </ul>
    </li>
    <!-----------------> 
    <li class="front"><a href="#">Item</a></li>
    <li class="front"><a href="#">Item</a></li>
  </ul>
</nav>

CSS

nav {
  color: #1d1d1d;
  margin: 0 auto;
  width: 541px;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  background-image: -webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%);
  background-image: linear-gradient(to bottom, #ff7000 70%, #ff560f 100%);
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }

nav ul li:hover {
  background-image: -webkit-linear-gradient(top, #ff8931, #ff5012);
  background-image: linear-gradient(to bottom, #ff8931, #ff5012);
}

nav ul li:hover > a { color: #fff; }

nav ul li a {
  display: block;
  padding: 10px 31px 10px 32px;
}

nav ul ul {
  position: absolute;
  top: 100%;
  padding: 0;
  border-radius: 0 0 5px 5px;
  background: #ff560f;
}

nav ul ul li {
  float: none;
  position: relative;
  border: none;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }

CSS mejorada

nav {
  color: #1d1d1d;
  margin: 0 auto;
  width: 841px;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  background-image: -webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%);
  background-image: linear-gradient(to bottom, #ff7000 70%, #ff560f 100%);
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }

nav ul li:hover {
  background-image: -webkit-linear-gradient(top, #ff8931, #ff5012);
  background-image: linear-gradient(to bottom, #ff8931, #ff5012);
  border-radius: 5px;
  border: 1px solid #fff;
}

nav ul li:hover > a { color: #fff; }

nav ul li a {
  display: block;
  padding: 10px 11px 10px 12px;
}

nav ul ul {
  position: absolute;
  top: 100%;
  padding: 0;
  border-radius: 0 0 5px 5px;
  background: #ff560f;
}

nav ul ul li {
  float: none;
  position: relative;
  border: none;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 11px; }

Par GloriaV dans Menu le 31 Juillet 2016 à 11:17

Vertical 3 niveles
Fuente. http://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/

<nav class="nav" role="navigation">
  <ul class="nav__list">
    <li>
      <input id="group-1" type="checkbox" hidden />
      <label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li><a href="#">1st level item</a></li>
        <li>
          <input id="sub-group-1" type="checkbox" hidden />
          <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-1" type="checkbox" hidden />
              <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-2" type="checkbox" hidden />
      <label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-2" type="checkbox" hidden />
          <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-2" type="checkbox" hidden />
              <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-3" type="checkbox" hidden />
      <label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-3" type="checkbox" hidden />
          <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-3" type="checkbox" hidden />
              <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-4" type="checkbox" hidden />
      <label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-4" type="checkbox" hidden />
          <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.nav a, .nav label {
  display: block;
  padding: .40rem;
  color: #000;
background: linear-gradient(to right, rgba(243,211,211,1) 0%, rgba(254,247,225,0.9) 24%, rgba(247,58,34,0.78) 51%, rgba(254,247,225,0.69) 71%, rgba(243,211,211,0.6) 94%, rgba(243,211,211,0.57) 100%);
  border-radius: 5px;
border: 1px dotted #543F03;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}
.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 255, 0.5);
  background: #FFE6E5;
}

.nav label { cursor: pointer; }
/**
 * Styling first level lists items */
.group-list a, .group-list label {
  padding-left: 3rem;
 background: linear-gradient(to right, rgba(243,211,211,1) 0%, rgba(254,247,225,0.9) 24%, rgba(254,247,225,0.69) 71%, rgba(243,211,211,0.6) 94%, rgba(243,211,211,0.57) 100%);
  box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { 
  background: #FFE5F8; }
/**
 * Styling second level list items
 */
.sub-group-list a, .sub-group-list label {
  padding-left: 3rem;
 background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(254,247,225,0.9) 24%, rgba(255,255,255,0.8) 46%, rgba(254,247,225,0.69) 71%, rgba(255,255,255,0.6) 94%, rgba(255,255,255,0.57) 100%);
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { 
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(254,247,225,0.9) 24%, rgba(255,255,255,0.8) 46%, rgba(254,247,225,0.69) 71%, rgba(255,229,248,0.6) 94%, rgba(255,229,248,0.57) 100%); }
/**
 * Styling third level list items
 */
.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 4rem;
  background: #FFE6E5;
  box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }
/**
 * Hide nested lists
 */
.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}
.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }
label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

HTML

Par GloriaV dans Menu le 31 Juillet 2016 à 11:10

3 niveles
Fuente: http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/

<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>

CSS

body, ul, li {
margin:0;
padding:0;
}
ul {
list-style:none;
display:inline-block;
}
ul li {
float:left;
}
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#C1F2FB;
border-radius: 5px;
border-bottom: 4px solid #0FA7C1;
}
ul#dropdownmenu li {
height:40px;
}
ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#000;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#0D8FA5;
border-radius: 5px;
border: 1px dotted #0FA7C1;
}

ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#84E5F6;
border-radius: 5px;
border: 1px dotted #0FA7C1;
position:absolute;
}
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#fff;
}
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}
ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;

}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:50

Horizontal 3 niveles

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

CSS

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }
 #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}
#nav li{
    float:left;
    position:relative;
}
#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}
#nav li ul a{
    width:12em;
    float:left;
}
#nav ul ul{
	top:auto;
	}

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

Par GloriaV dans Menu le 31 Juillet 2016 à 10:49

Horizontal 3 niveles !!!

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

/* Menu Styles */

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

Par GloriaV dans Menu le 31 Juillet 2016 à 10:48

Horizontal 2 niveles!!!

<div class="example" align="center">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="index.php?id=1" class="blue">Home</a></li>
        <li><a href="index.php?id=14" class="blue">About Us</a></li>
            <li><a href="index.php?id=4" class="blue">Mens</a>
                <div class="subs">
                    <dl>
                        <dd><a href="index.php?id=15">Coats & Jackets</a></dd>
                        <dd><a href="index.php?id=22">Chinos</a></dd>
                        <dd><a href="index.php?id=23">Jeans</a></dd>
                        <dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd>
                        <dd><a href="index.php?id=25">Linen</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=26">Polo Shirts</a></dd>
                        <dd><a href="index.php?id=16">Shirts Casual</a></dd>
                        <dd><a href="index.php?id=27">Shirts Formal</a></dd>
                        <dd><a href="index.php?id=28">Shorts</a></dd>
                        <dd><a href="index.php?id=18">Sportswear</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=19">Tops & T-Shirts</a></dd>
                        <dd><a href="index.php?id=20">Trousers Casual</a></dd>
                        <dd><a href="index.php?id=29">Trousers Formal</a></dd>
                        <dd><a href="index.php?id=30">Nightwear</a></dd>
                        <dd><a href="index.php?id=17">Socks</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=21">Underwear</a></dd>
                        <dd><a href="index.php?id=31">Swimwear</a></dd>
                    </dl>
                </div>
            </li>
            <!--menu-->
                        <li><a href="index.php?id=5" class="blue">Ladie's</a>
                <div class="subs">
                    <dl>
                          <dd><a href="index.php?id=32">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=33">Dresses</a></dd>
                          <dd><a href="index.php?id=34">Jeans</a></dd>
                          <dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd>
                          <dd><a href="index.php?id=36">Jumpsuits</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=37">Leggings & Jeggings</a></dd>
                          <dd><a href="index.php?id=38">Linen</a></dd>
                          <dd><a href="index.php?id=39">Lingerie & Underwear</a></dd>
                          <dd><a href="index.php?id=40">Maternity Wear</a></dd>
                          <dd><a href="index.php?id=41">Nightwear</a></dd>
                    </dl>
                    <dl>
                     <dd><a href="index.php?id=42">Shorts</a></dd>
                          <dd><a href="index.php?id=43">Skirts</a></dd>
                          <dd><a href="index.php?id=44">Sportswear</a></dd>
                          <dd><a href="index.php?id=45">Suits & Tailoring</a></dd>
                          <dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd>
                    </dl>
                    <dl>
                          <dd><a href="index.php?id=47">Thermals</a></dd>
                          <dd><a href="index.php?id=48">Tops & T-Shirts</a></dd>
                          <dd><a href="index.php?id=49">Trousers & Chinos</a></dd>
                          <dd><a href="index.php?id=50">Socks</a></dd>
                    </dl>
                </div>
            </li><!--menu end-->
                        <!--menu-->
                        <li><a href="index.php?id=7" class="blue">Girls</a>
                <div class="subs">
                    <dl>
                            <dd><a href="index.php?id=51">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=52">Dresses</a></dd>
                          <dd><a href="index.php?id=53">Jeans</a></dd>
                          <dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd>
                          <dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd>
                    </dl>
                    <dl>
                                <dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd>
                              <dd><a href="index.php?id=57">Leggings</a></dd>
                              <dd><a href="index.php?id=58">Nightwear</a></dd>
                              <dd><a href="index.php?id=59">Shorts</a></dd>
                              <dd><a href="index.php?id=60">Skirts</a></dd>
                    </dl>
                    <dl>
                              <dd><a href="index.php?id=61">Swimwear</a></dd>
                              <dd><a href="index.php?id=62">Tops & T-Shirts</a></dd>
                              <dd><a href="index.php?id=63">Trousers & Jeans</a></dd>
                              <dd><a href="index.php?id=64">Socks</a></dd>
                              <dd><a href="index.php?id=65">Underwear</a></dd>
                    </dl>
                    <dl>

                    </dl>
                </div>
            </li><!--menu end-->
                            <!--menu-->
                        <li><a href="index.php?id=8" class="blue">Boys</a>
                <div class="subs">
                    <dl>
                        <dd><a href="index.php?id=66">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=67">Jeans</a></dd>
                          <dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd>
                          <dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd>
                          <dd><a href="index.php?id=70">Nightwear</a></dd>
                    </dl>
                    <dl>
                            <dd><a href="index.php?id=71">Shirts</a></dd>
                          <dd><a href="index.php?id=72">Shorts</a></dd>
                          <dd><a href="index.php?id=73">Sportswear</a></dd>
                          <dd><a href="index.php?id=74">Swimwear</a></dd>
                          <dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd>
                    </dl>
                    <dl>
                          <dd><a href="index.php?id=76">Trousers & Jeans</a></dd>
                          <dd><a href="index.php?id=77">Socks</a></dd>
                          <dd><a href="index.php?id=78">Underwear</a></dd>
                    </dl>
                    <dl>

                    </dl>
                </div>
            </li><!--menu end-->
            <!--menu-->
             <li><a href="index.php?id=9" class="blue">Toddlers</a>
                <div class="subs">
                    <dl>
                      <dd><a href="index.php?id=79">Newborn</a></dd>
                      <dd><a href="index.php?id=80">0-2 Years</a></dd>
                    </dl>                 
                </div>
            </li><!--menu end-->
            <!--menu-->
             <li><a href="index.php?id=10" class="blue">Accessories</a>
                <div class="subs">
                    <dl>
                          <dd><a href="index.php?id=81">Shoes</a></dd>
                          <dd><a href="index.php?id=82">Ties</a></dd>
                          <dd><a href="index.php?id=83">Caps</a></dd>
                          <dd><a href="index.php?id=84">Belts</a></dd>
                    </dl>                 
                </div>
            </li><!--menu end-->
            <li><a href="index.php?id=13" class="blue">Contact Us</a></li>
        </ul>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
    <div style="clear:both"></div>
</div>

CSS

<style>

body{margin:0px;}
.example {
    width:980px;
    height:40px;
    margin:0px auto;
 position:absolute;
 margin-bottom:60px;
 top:95px;
}

.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:10px;
    left:5%;
    position:absolute;
    top:-9px;
    width:100%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.88);
    height:0;
    width:980px; /*100%*/
}
.menuholder:hover div.back {
    height:280px;
}
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 10px 0 0;
}
ul.menu li > a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.3s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.3s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.3s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    color:#eee;
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.3s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#073263;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:47

2 niveles
Fuente: http://stackoverflow.com/questions/tagged/css

<ul tabindex='0'>
    <li>
        <input id='item1' type='radio' name='item' checked='true' />
        <label for='item1'>Item 1</label>
    </li>
    <li>
        <input id='item2' type='radio' name='item' />
        <label for='item2'>Item 2</label>
    </li>
    <li>
        <input id='item3' type='radio' name='item' />
        <label for='item3'>Item 3</label>
    </li>
</ul>

CSS

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li input {
    display:none;
}
ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {
    display:none;
}
input:checked+label {
    color:red;
}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:46

Horizontal 2 niveles

Fuente: http://www.html5xcss3.com/p/horizontal-css3-menus-tutorials.html

<ul id="nav">
    <li><a href="https://www.script-tutorials.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="https://www.script-tutorials.com/pure-css3-lavalamp-menu/">Back</a></li>
    <div id="lavalamp"></div>
</ul>

CSS

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:45

Horizontal 2 niveles!!!

<ul id="nav">
    <li><a href="https://www.script-tutorials.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="https://www.script-tutorials.com/flying-css3-navigation-menu/">Back</a></li>
</ul>

CSS

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;

    /* border radius */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    /* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes animation1 {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}
#nav li > a:hover {
    /* css3 animation */
    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
    z-index: 4;
}
#nav li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
@-moz-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
#nav li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:44

Horizontal 2 niveles

<ul id="nav">
    <li><a href="#">Menu element</a>
        <ul>
            <li><a href="#">Submenu element</a></li>
            .....
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    .....
</ul>

CSS

 #nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 700px;

    /* border radius */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    /* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav > li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}

/* keyframes #animation */
@-webkit-keyframes animation {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}
@-moz-keyframes animation {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1.1);
    }
}
#nav li > a:hover {
    /* CSS3 animation */
    -webkit-animation-name: animation;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: animation;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
#nav li:hover ul {
    left: 0;
    top: 34px;
    width: 150px;
}

Par GloriaV dans Menu le 31 Juillet 2016 à 10:41

Horizontal 2 niveles

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 960px;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #fff;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);      
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0; 
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3; 
    border-bottom-color: transparent;   
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;

Par GloriaV dans Menu le 31 Juillet 2016 à 10:41

Horizontal 3 niveles

<div class="example">
    <ul id="nav">
        <li class="current"><a href="https://www.script-tutorials.com/">Home</a></li>
        <li><a href="https://www.script-tutorials.com/">Tutorials</a>
            <ul>
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a>
                    <ul>
                        <li><a href="https://www.script-tutorials.com/category/jquery/">jQuery</a></li>
                        <li><a href="https://www.script-tutorials.com/category/javascript/">JS</a></li>
                    </ul>
                </li>
                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
            </ul>
        </li>
        <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
            <ul>
                <li><a href="https://www.script-tutorials.com/category/resources/">By category</a>
                    <ul>
                        <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                        <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                        <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="https://www.script-tutorials.com/category/resources/">By tag name</a>
                    <ul>
                        <li><a href="https://www.script-tutorials.com/tag/captcha/">captcha</a></li>
                        <li><a href="https://www.script-tutorials.com/tag/gallery/">gallery</a></li>
                        <li><a href="https://www.script-tutorials.com/tag/animation/">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="https://www.script-tutorials.com/about/">About</a></li>
        <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu/">Go Back To The Tutorial</a></li>
    </ul>
</div>

CSS

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    background:#fff url(../images/clouds-in-blue-sky.jpg);
    width:770px;
    height:570px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


/* main menu styles */
#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#335599 url(../images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160px;
    top:0px;
}

Par GloriaV dans Texto le 30 Juillet 2016 à 12:30

Escribe texto, seleccione la fuente y ver cómo se verá, copiar y pegar, si es necesario, al programa deseado. Automáticamente se nota lo mucho que tiene en la fuente del sistema.

Par GloriaV dans Texto le 30 Juillet 2016 à 12:26

Las grandes mentes discuten las ideas; las mentes promedio discuten los eventos; las mentes pequeñas discuten con la gente.
Eleanor Roosevelt.

<p><span style="font-size: 33px; color: #3b4e50; font-family: Parchment;">
 <strong><span style="text-shadow: #ffffff 1px 0px, #ffffff 1px 1px,
 #ffffff 0px 1px, #ffffff -1px 1px, #ffffff -1px 0px, #ffffff -1px -1px,
 #f4e3bf 0px -1px,#f4e3bf 1px -1px, #f4e3bf 0 0 3px, #f4e3bf 0 0 3px,
 #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px,  #000000 0 0 3px; 
font-size: 33px;">Texto<br /></span></strong></span></p>

Aunque viajemos por todo el mundo para encontrar la belleza, debemos llevarla con nosotros para poder encontrarla.
Emerson

<p><br /><span style="font-size: 17px; color: #000; 
font-family: Old English Text MT;"> <strong>
<span style="text-shadow: #f4e3bf 1px 0px, #f4e3bf 1px 1px,
 #f4e3bf 0px 1px, #f4e3bf -1px 1px, #f4e3bf -1px 0px,
 #f4e3bf -1px -1px, #f4e3bf 0px -1px,#f4e3bf 1px -1px,
 #f4e3bf 0 0 3px, #f4e3bf 0 0 3px, #000000 0 0 3px,
 #000000 0 0 3px, #000000 0 0 3px,  #000000 0 0 3px; 
font-size: 17px;">Texto </span></strong></span></p>

Para hacer que una lámpara esté siempre encendida, no debemos de dejar de ponerle aceite.
Madre Teresa de Calcuta

<p><span style="font-size: 17px; color: #21cfe9; font-family: verdana;">
<strong><span style="text-shadow: #641a10 1px 0px, #641a10 1px 1px, 
#641a10 0px 1px, #641a10 -1px 1px, #641a10 -1px 0px, #641a10 -1px -1px,
 #641a10 0px -1px,#641a10 1px -1px, #641a10 0 0 3px, #641a10 0 0 3px, 
#641a10 0 0 3px, #641a10 0 0 3px, #641a10 0 0 3px,  #641a10 0 0 3px;
 font-size: 19px;">Texto<br /></span></strong></span></p>

Par GloriaV dans Texto le 30 Juillet 2016 à 12:24

Miré mi árbol de familia y encontré que yo era el sapo.-Rodney Dangerfield.

<p><span style="text-shadow: #000000 1px 0px,
#000000 1px 1px,#000000 0px 1px, #000000 -1px 1px, 
#000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, 
#000000 1px -1px,#000000 0 0 3px, #000000 0 0 3px,
#000000 0 0 3px, #000000 0 0 3px; font-size: 39px; 
color: #fffe9f;">Texto</span></p>

Creo que si la vida te da limones, deberías hacer limonada. Y tratar de encontrar alguien a quien la vida le da vodka y hacer una fiesta.
Ron White.

<p><span style="text-shadow: #fff 1px 0px, #000000 1px 1px, #000000 0px 1px, 
#000000 -1px 1px, #fff -1px 0px, #fff -1px -1px, 
#fff 0px -1px, #fff 1px -1px, #fff 0 0 3px, #fff 0 0 3px, 
#000000 0 0 3px, #fff 0 0 3px, #fff 0 0 3px, #fff 0 0 3px, 
#fff 0 0 3px, #fff 0 0 3px;">Texto</span></p>

La inactividad sexual es peligrosa, produce cuernos.

<div style="font-size: 30px;color:#000000;font-family: Vivaldi;
text-shadow: rgb(255, 255, 0) 0px -1px 2px, rgb(255, 204, 0) 
-1px -3px 3px, rgb(255, 153, 0) -1px -5px 4px, rgb(255, 102, 0)
 -1px -7px 5px, rgb(255, 51, 0) 0px -9px 6px, rgb(255, 0, 0) 4px 
-11px 7px; ">Texto</div>

Un hombre exitoso es uno que gana más dinero del que su mujer puede gastar. Una mujer exitosa es una que puede encontrar un hombre así.
Lana Turner

<div style="font-size: 20px; color: #511D0C; font-family: Verdana;
 margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 10px #fefcc9,
 5px -5px 15px #ffff00, -10px -10px 20px #ffae34, 10px -20px 25px #ec760c,
 -10px -30px 30px #cd4606, 0pt -40px 35px #973716, 5px -45px 40px #451b0e;">
Texto</div>

No puede haber una crisis la próxima semana. Mi horario ya esta lleno.
Henry A. Kissinger.

<div style="font-size: 35px; color: #3f2305; font-family: 
Edwardian Script ITC; text-shadow: #ffff00 0px -2px 4px, 
#ffcc00 -2px -6px 6px, #ff9900 -2px -10px 8px, #ff6600 
-2px -14px 10px, #ff3300 0px -18px 12px, #ff0000 2px 
-22px 14px;">Texto</div>

La edad es algo que no importa, al menos que seas un queso.
Luis Buñuel

<div style="font-size: 25px; color: #914402; font-family: Monotype Corsiva;
 margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px #fefcc9,
 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 
-20px -60px 60px #cd4606, 0pt -80px 70px #973716, 10px -90px 80px #451b0e;">
Texto</div>

Par GloriaV dans Musica le 30 Juillet 2016 à 12:22

votre commentaire

Par GloriaV dans Musica le 30 Juillet 2016 à 11:29

<div style="padding: 6px; border-radius: 5px; 

 background-image: url('http://img0.liveinternet.ru/images/attach/d/1/130/261/130261402_mhost.gif'); 

width: 580px; height: 100%;">
<div style="padding: 10px;"><br />

<iframe style="width: 100; height: 300; border: 0px outset;" 

src="http://flashframe.li.ru/showflash.html?tag_value=http%3A%2F%2

Fmusic.privet.ru%2Fswf%2Fmp3player.swf%3Fautostart%3Dfalse%26

bufferlength%3D3%26showeq%3D1%26displayheight%3D0%26file%

3Dhttp%253A%252F%252Fmusic.privet.ru%252Fmusic-play-playlist%

252FXSPF%252F6501297.xml%26type%3Dxml%26id%3D6501297%

26repeat%3Dlist%26shuffle%3Dfalse%26callback%3Dhttp%3A%2F%

2Fmusic.privet.ru%2Fcallback.php%26backcolor%3D0x117065%26

frontcolor%3D0xe9ebee%26lightcolor%3D0x376478&amp;

flash_width=100&amp;flash_height=300&amp;style=" 

frameborder="0" scrolling="no" width="100" height="300"></iframe></div>
</div>

votre commentaire

Par GloriaV dans Cuadros personas le 30 Juillet 2016 à 11:28

Texto

<p><img src="http://s55.radikal.ru/i147/1303/9c/fdce353f7044.png" border="0" alt="" width="450" align="right" /><br /> <br /> <br /> <br />  </p>
<div style="padding: 10px;"><div style="padding: 12px; border-radius: 5px; border: 2px double #FFFDF7; box-shadow: 0px 0px 0px #000000; background-image: url('http://s49.radikal.ru/i124/1303/cb/ac3c16a8403b.png'); background-repeat: repeat;">
<div style="padding: 45px; border-radius: 5px; box-shadow: 0px 0px 0px #000000; background-image: url('http://img-fotki.yandex.ru/get/6313/132352990.af/0_80f33_487737a3_S');">
<div style="border-radius: 5px; border: 2px ridge #FFFDF7;">
<div style="padding: 5px;"><div style="border-radius: 5px; border: 2px ridge #A8B2E7;">
<div style="padding: 1px;"><div style="border-radius: 5px; border: 1px ridge #FFFDF7; box-shadow: 0px 0px 20px #000000; height: 100%; background-image: url('http://s49.radikal.ru/i124/1303/cb/ac3c16a8403b.png'); width: auto;">
<div style="padding: 10px;"><p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="color: #ffffff;">Texto</span></p>
<br /><br /><br /><br /></div></div></div></div></div></div></div></div></div>

votre commentaire
Par GloriaV dans Cuadros personas le 30 Juillet 2016 à 11:24

Texto

<div style="padding: 10px;"><div style="padding: 2px; border-radius: 10px; background-image: url('http://ekladata.com/-DfeNT-0VL1Ql3pZ4Cu0zUZ658g@85x84.jpg'); box-shadow: 1px 1px 5px #000000;">
<div style="padding: 10px; border-radius: 10px; background-image: url('https://lh3.googleusercontent.com/-ScMyR42BIknzQNdFZYbNaEkscdKl11tG_3KWa01stwF=w10-h150-no');">
<div style="padding: 2px; border-radius: 10px; box-shadow: 0px 0px 5px #000000; background-image: url('http://ekladata.com/-DfeNT-0VL1Ql3pZ4Cu0zUZ658g@85x84.jpg'); background-repeat: repeat;">
<div style="padding: 60px; border-radius: 10px; box-shadow: inset 0px 0px 25px #000000; background-image: url('https://lh3.googleusercontent.com/-52ZLQwfNGvg/V4OpaHYH_VI/AAAAAAACItg/5Vve_9cxSUswXIG0eytvh8Ef8y1MMOfTQCLcB/w426-h520/2.gif');">
<div style="padding: 2px; border-radius: 10px; box-shadow: 0px 0px 25px #000000; background-image: url('http://ekladata.com/-DfeNT-0VL1Ql3pZ4Cu0zUZ658g@85x84.jpg'); background-repeat: repeat;">
<div style="padding: 10px; border-radius: 10px; box-shadow: inset 1px 1px 15px #000000; background-image: url('https://lh3.googleusercontent.com/-ScMyR42BIknzQNdFZYbNaEkscdKl11tG_3KWa01stwF=w10-h150-no');">
<div style="padding: 2px; border-radius: 210px; background-image: url('http://ekladata.com/-DfeNT-0VL1Ql3pZ4Cu0zUZ658g@85x84.jpg'); background-repeat: repeat;">
<div style="border-radius: 210px; box-shadow: inset 0px 0px 5px #000000; background-image: url('http://www.ephotobay.com/image/1-1249.jpg'); height: 100%;">
<div style="padding: 35px;"><img style="margin-left: auto; border-radius: 10px; box-shadow: 1px 1px 6px 1px #666; display: block; margin-right: auto;" title="" src="http://img-fotki.yandex.ru/get/6408/105877511.ef/0_77edd_66523b9b_XL.jpg" alt="" width="270" height="350" /><p style="text-align: center;">Texto</p>
<br /><br /><br /><br /></div></div></div></div></div></div></div></div></div></div>

votre commentaire
1 2 3 4 5

Suivre le flux RSS des articles
Suivre le flux RSS des commentaires