كود عمل قائمة منسدلة html + css ~ مواضيع مختلفة

                                 كود html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="e.css">
<meta charset="utf-8">
    <title>website</title>
</head>
<body >
<nav class="menu">
<div id="logo">
my wibsite
</div>

      <ul>
            <li><a class="menu-item" href="#"> about</a></li>
              <li><a class="menu-item" href="#">biogrphy </a>
              <div class="sub-content">
                      <div class="sub-drop">
                      <ul>
                          <li><a href="#"> photoshop </a></li>
                          <li><a href="#"> illustrator </a></li>
                          <li><a href="#"> indesign </a></li>
                          </ul>
                      </div>
              </div>
              </li>
            <li><a class="menu-item" href="#"> gallry</a>
      <div class="sub-content">
                      <div class="sub-drop">
                      <ul>
                          <li><a href="#"> html css </a> </li>
                          <li><a href="#"> java script </a> </li>

                          </ul>
                      </div>

            </li>
            <li><a class="menu-item" href="#"> contact </a></li>

      </ul>
</nav>
</body>
</html>

                 كود css
*,body, html {
    margin: 0;
    padding: 0;
    font: 1.03em "open sans", sans-serif;

}

/* -----------------------------------------------------------------*/

.menu {
       /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,207cca+7,207cca+7,2b88d9+97,7db9e8+100 */
       background: #3b679e; /* Old browsers */
       background: -moz-linear-gradient(top, #3b679e 0%, #207cca 7%, #207cca 7%, #2b88d9 97%, #7db9e8 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top, #3b679e 0%,#207cca 7%,#207cca 7%,#2b88d9 97%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom, #3b679e 0%,#207cca 7%,#207cca 7%,#2b88d9 97%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

       width: 100%;
       background-color: #333;
       color: #fff;
         height: 60px;
    }

.menu #logo {
    float: left;
    height: 30px;
    padding: 15px 30px;
    font-size: 1.2em;
    line-height: 30px;
    display: none;
}
.myimg {
    width: 100px;
    float: left;
    height: 30px;
    padding: 15px 30px;

}

.menu > ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style-type: none;

}

.menu > ul > li {
    float: left;
}

.menu-item {
    display: inline-block;
    padding: 15px 20px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-decoration: none;

}

.menu-item:hover {
    image-rendering: pixelated;
    background-color: #ff0055;
     color: #000;
}

/* ---------------------------------------------------- */

.sub-content {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#299a0b+0,299a0b+100;Green+Flat+%231 */
background: #299a0b; /* Old browsers */
background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #299a0b 0%,#299a0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */ogid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */

    position: absolute;
    top: 60px;
    overflow: hidden;
    background-color: #333;
    max-height: 0;
}

.sub-content a {
    color: #fff;
    text-decoration: none;
    padding: 30px;
}

.sub-drop {
    padding: 0;
}

.sub-drop ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.sub-drop ul li a {
    display: inline-block;
    padding: 10px 20px;

}

.sub-drop ul li:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss */
background: #f0b7a1; /* Old browsers */
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */

    background-color: #ff0055;

}

/* ---------------------------------------------------- */

.menu-item:focus {
    background-color: #ff0055;


}

.menu ul li:hover .sub-content {
    max-height: 400px;
    transition: max-height 0.3em ease-in;
    --webkit-transition: max-height 0.3em ease-in;
    --moz-transition: max-height 0.3em ease-in;

}

تصنيف : اكواد برمجة,الرئيسية

مواضيع مختلفة

تعديل