CSS Menü Örnekleri

HTML ve CSS kullanarak yapılmış, yatay menü, dikey menü ve açılır menü örnekleri. CSS Menü Örnekleri ekran görüntüleri, HTML Kodları ve CSS Kodlarını alarak düzenleyebilir ve Web Sitenizde kullanabilirsiniz.

CSS Menü Örnekleri konusu altına yeni örnekler eklenecektir.

Bu sayfada bulunan CSS Menü örneklerinden bazıları Duyarlı (Responsive) olarak ayarlanmıştır. Mobil uyumludur.

İçindekiler

CSS Menü Örnekleri 1:

Masaüstü Görünüm:

Mobil Görünüm:

HTML Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>CSS MenuMaker</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>ANASAYFA</span></a></li>
   <li><a href='#'><span>WEB TASARIM</span></a></li>
   <li><a href='#'><span>PROGRAMLAMA</span></a></li>
   <li class='last'><a href='#'><span>VERİTABANI</span></a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>CSS MenuMaker</title>

</head>

<body>

<ul>

<li class='active'><a href='#'><span>ANASAYFA</span></a></li>

<li><a href='#'><span>WEB TASARIM</span></a></li>

<li><a href='#'><span>PROGRAMLAMA</span></a></li>

<li class='last'><a href='#'><span>VERİTABANI</span></a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background:#66D2ED;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

#cssmenu {

background:#66D2ED;

width: auto;

}

#cssmenu ul {

list-style: none;

margin: 0;

padding: 0;

line-height: 1;

display: block;

zoom: 1;

}

#cssmenu ul:after {

content: " ";

display: block;

font-size: 0;

height: 0;

clear: both;

visibility: hidden;

}

#cssmenu ul li {

display: inline-block;

padding: 0;

margin: 0;

}

#cssmenu.align-right ul li {

float: right;

}

#cssmenu.align-center ul {

text-align: center;

}

#cssmenu ul li a {

color: #ffffff;

text-decoration: none;

display: block;

padding: 15px 25px;

font-family: 'Open Sans', sans-serif;

font-weight: 700;

text-transform: uppercase;

font-size: 14px;

position: relative;

-webkit-transition: color .25s;

-moz-transition: color .25s;

-ms-transition: color .25s;

-o-transition: color .25s;

transition: color .25s;

}

#cssmenu ul li a:hover {

color: #333333;

}

#cssmenu ul li a:hover:before {

width: 100%;

}

#cssmenu ul li a:after {

content: "";

display: block;

position: absolute;

right: -3px;

top: 19px;

height: 6px;

width: 6px;

background: #ffffff;

opacity: .5;

}

#cssmenu ul li a:before {

content: "";

display: block;

position: absolute;

left: 0;

bottom: 0;

height: 3px;

width: 0;

background: #333333;

-webkit-transition: width .25s;

-moz-transition: width .25s;

-ms-transition: width .25s;

-o-transition: width .25s;

transition: width .25s;

}

#cssmenu ul li.last > a:after,

#cssmenu ul li:last-child > a:after {

display: none;

}

#cssmenu ul li.active a {

color: #333333;

}

#cssmenu ul li.active a:before {

width: 100%;

}

#cssmenu.align-right li.last > a:after,

#cssmenu.align-right li:last-child > a:after {

display: block;

}

#cssmenu.align-right li:first-child a:after {

display: none;

}

@media screen and (max-width: 768px) {

#cssmenu ul li {

float: none;

display: block;

}

#cssmenu ul li a {

width: 100%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border-bottom: 1px solid #fb998c;

}

#cssmenu ul li.last > a,

#cssmenu ul li:last-child > a {

border: 0;

}

#cssmenu ul li a:after {

display: none;

}

#cssmenu ul li a:before {

display: none;

}

CSS Menü Örnekleri 2

Masaüstü Görünüm:

HTML Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>www.tasarimkodlama.com</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>ANASAYFA</a></li>
   <li><a href='#'>WEB TASARIM</a></li>
   <li><a href='#'>PROGRAMLAMA</a></li>
   <li><a href='#'>VERİTABANI</a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

<ul>

<li class='active'><a href='#'>ANASAYFA</a></li>

<li><a href='#'>WEB TASARIM</a></li>

<li><a href='#'>PROGRAMLAMA</a></li>

<li><a href='#'>VERİTABANI</a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #F66127;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #ffffff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background:#F66127;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a {

margin: 0;

padding: 0;

border: 0;

list-style: none;

line-height: 1;

display: block;

position: relative;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#cssmenu:after,

#cssmenu > ul:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

#cssmenu {

width: auto;

border-bottom: 3px solid #F66127;

font-family: Raleway, sans-serif;

line-height: 1;

}

#cssmenu ul {

background: #ffffff;

}

#cssmenu > ul > li {

float: left;

}

#cssmenu.align-center > ul {

font-size: 0;

text-align: center;

}

#cssmenu.align-center > ul > li {

display: inline-block;

float: none;

}

#cssmenu.align-right > ul > li {

float: right;

}

#cssmenu.align-right > ul > li > a {

margin-right: 0;

margin-left: -4px;

}

#cssmenu > ul > li > a {

z-index: 2;

padding: 18px 25px 12px 25px;

font-size: 15px;

font-weight: 400;

text-decoration: none;

color: #444444;

-webkit-transition: all .2s ease;

-moz-transition: all .2s ease;

-ms-transition: all .2s ease;

-o-transition: all .2s ease;

transition: all .2s ease;

margin-right: -4px;

}

#cssmenu > ul > li.active > a,

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {

color: #ffffff;

}

#cssmenu > ul > li > a:after {

position: absolute;

left: 0;

bottom: 0;

right: 0;

z-index: -1;

width: 100%;

height: 120%;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

content: "";

-webkit-transition: all .2s ease;

-o-transition: all .2s ease;

transition: all .2s ease;

-webkit-transform: perspective(5px) rotateX(2deg);

-webkit-transform-origin: bottom;

-moz-transform: perspective(5px) rotateX(2deg);

-moz-transform-origin: bottom;

transform: perspective(5px) rotateX(2deg);

transform-origin: bottom;

}

#cssmenu > ul > li.active > a:after,

#cssmenu > ul > li:hover > a:after,

#cssmenu > ul > li > a:hover:after {

background:#F66127;

}

CSS Menü Örnekleri 3

HTML Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>tasarimkodlama.comr</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Anasayfa</a></li>
   <li><a href='#'>Web Tasarım</a></li>
   <li><a href='#'>Programlama</a></li>
   <li><a href='#'>Veritabanı</a></li>
   <li><a href='#'>İletişim</a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>tasarimkodlama.comr</title>

</head>

<body>

<ul>

<li class='active'><a href='#'>Anasayfa</a></li>

<li><a href='#'>Web Tasarım</a></li>

<li><a href='#'>Programlama</a></li>

<li><a href='#'>Veritabanı</a></li>

<li><a href='#'>İletişim</a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 180px;
  z-index: 10;
}
#cssmenu ul {
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: #ffffff;
  background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: linear-gradient(to top, #f0f0f0, #ffffff);
}
#cssmenu ul li {
  display: block;
  border-bottom: 1px solid #cccccc;
}
#cssmenu ul li.active {
  border-bottom: 0;
}
#cssmenu ul li:last-child {
  border-bottom: 0;
}
#cssmenu ul li a {
  display: block;
  padding: 14px 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #444444;
}
#cssmenu ul li.active {
  left: -8px;
  width: 194px;
  padding: 2px;
  background: #ce4c4a;
  background: -moz-linear-gradient(bottom, #c43735, #d56462);
  background: -webkit-linear-gradient(bottom, #c43735, #d56462);
  background: -o-linear-gradient(bottom, #c43735, #d56462);
  background: -ms-linear-gradient(bottom, #c43735, #d56462);
  background: linear-gradient(to top, #c43735, #d56462);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
#cssmenu ul li.active > a {
  padding: 12px 12px 12px 16px;
  border-left: 1px dashed #de8886;
  border-top: 1px dashed #de8886;
  border-bottom: 1px dashed #de8886;
  color: #ffffff;
  text-shadow: 0 1px 1px #8c2726;
}
#cssmenu ul li.active:after {
  position: absolute;
  right: -16px;
  top: 7px;
  width: 31.526911934581186px;
  height: 31.526911934581186px;
  background: #ce4c4a;
  background: -moz-linear-gradient(-45deg, #c43735, #d56462);
  background: -webkit-linear-gradient(-45deg, #c43735, #d56462);
  background: -o-linear-gradient(-45deg, #c43735, #d56462);
  background: -ms-linear-gradient(-45deg, #c43735, #d56462);
  background: linear-gradient(-45deg, #c43735, #d56462);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#cssmenu ul li.active:before {
  position: absolute;
  right: -12px;
  top: 9px;
  z-index: 10;
  width: 28.526911934581186px;
  height: 28.526911934581186px;
  border-right: 1px dashed #e9afae;
  border-top: 1px dashed #e9afae;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#cssmenu ul li.active a:after {
  position: absolute;
  bottom: -7px;
  left: -11px;
  z-index: -1;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid #982b29;
  content: "";
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a {

margin: 0;

padding: 0;

border: 0;

list-style: none;

line-height: 1;

display: block;

position: relative;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#cssmenu {

width: 180px;

z-index: 10;

}

#cssmenu ul {

border: 1px solid #cccccc;

border-radius: 5px;

background: #ffffff;

background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);

background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);

background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);

background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);

background: linear-gradient(to top, #f0f0f0, #ffffff);

}

#cssmenu ul li {

display: block;

border-bottom: 1px solid #cccccc;

}

#cssmenu ul li.active {

border-bottom: 0;

}

#cssmenu ul li:last-child {

border-bottom: 0;

}

#cssmenu ul li a {

display: block;

padding: 14px 12px;

font-family: Helvetica, Arial, sans-serif;

font-size: 16px;

font-weight: bold;

text-decoration: none;

color: #444444;

}

#cssmenu ul li.active {

left: -8px;

width: 194px;

padding: 2px;

background: #ce4c4a;

background: -moz-linear-gradient(bottom, #c43735, #d56462);

background: -webkit-linear-gradient(bottom, #c43735, #d56462);

background: -o-linear-gradient(bottom, #c43735, #d56462);

background: -ms-linear-gradient(bottom, #c43735, #d56462);

background: linear-gradient(to top, #c43735, #d56462);

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);

}

#cssmenu ul li.active > a {

padding: 12px 12px 12px 16px;

border-left: 1px dashed #de8886;

border-top: 1px dashed #de8886;

border-bottom: 1px dashed #de8886;

color: #ffffff;

text-shadow: 0 1px 1px #8c2726;

}

#cssmenu ul li.active:after {

position: absolute;

right: -16px;

top: 7px;

width: 31.526911934581186px;

height: 31.526911934581186px;

background: #ce4c4a;

background: -moz-linear-gradient(-45deg, #c43735, #d56462);

background: -webkit-linear-gradient(-45deg, #c43735, #d56462);

background: -o-linear-gradient(-45deg, #c43735, #d56462);

background: -ms-linear-gradient(-45deg, #c43735, #d56462);

background: linear-gradient(-45deg, #c43735, #d56462);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

content: "";

}

#cssmenu ul li.active:before {

position: absolute;

right: -12px;

top: 9px;

z-index: 10;

width: 28.526911934581186px;

height: 28.526911934581186px;

border-right: 1px dashed #e9afae;

border-top: 1px dashed #e9afae;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

content: "";

}

#cssmenu ul li.active a:after {

position: absolute;

bottom: -7px;

left: -11px;

z-index: -1;

width: 0;

height: 0;

border-top: 4px solid transparent;

border-bottom: 4px solid transparent;

border-left: 8px solid transparent;

border-right: 8px solid #982b29;

content: "";

}

CSS Menü Örnekleri 4

Masaüstü Görünüm:

Html Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>tasarimkodlama.com</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Anasayfa</span></a></li>
   <li class='active has-sub'><a href='#'><span>Web Tasarım</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>HTML</span></a>
            <ul>
               <li><a href='#'><span>HTML Dersler</span></a></li>
               <li class='last'><a href='#'><span>HTML Örnekler</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>CSS</span></a>
            <ul>
               <li><a href='#'><span>CSS Dersler</span></a></li>
               <li class='last'><a href='#'><span>CSS Örnekler</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Programlama</span></a></li>
   <li class='last'><a href='#'><span>Veritabanı</span></a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>tasarimkodlama.com</title>

</head>

<body>

<ul>

<li><a href='#'><span>Anasayfa</span></a></li>

<li class='active has-sub'><a href='#'><span>Web Tasarım</span></a>

<ul>

<ul>

<li><a href='#'><span>HTML Dersler</span></a></li>

<li class='last'><a href='#'><span>HTML Örnekler</span></a></li>

</ul>

</li>

<ul>

<li><a href='#'><span>CSS Dersler</span></a></li>

<li class='last'><a href='#'><span>CSS Örnekler</span></a></li>

</ul>

</li>

</ul>

</li>

<li><a href='#'><span>Programlama</span></a></li>

<li class='last'><a href='#'><span>Veritabanı</span></a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  border: none;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#cssmenu {
  height: 37px;
  display: block;
  border: 1px solid;
  border-radius: 5px;
  width: auto;
  border-color: #080808;
  margin: 0;
  padding: 0;
}
#cssmenu > ul {
  list-style: inside none;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > li {
  list-style: inside none;
  float: left;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  float: none;
  margin-left: -3px;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmenu > ul > li > a {
  outline: none;
  display: block;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: 700;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  border-right: 1px solid #080808;
  color: #ffffff;
  padding: 12px 20px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li > a:after {
  content: "";
  position: absolute;
  border-right: 1px solid;
  top: -1px;
  bottom: -1px;
  right: -2px;
  z-index: 99;
  border-color: #3c3c3c;
}
#cssmenu ul li.has-sub:hover > a:after {
  top: 0;
  bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
  content: "";
  position: absolute;
  top: 18px;
  right: 6px;
  border: 5px solid transparent;
  border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 19px;
}
#cssmenu > ul > li.has-sub:hover > a {
  padding-bottom: 14px;
  z-index: 999;
  border-color: #3f3f3f;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
  display: block;
}
#cssmenu > ul > li.has-sub > a:hover,
#cssmenu > ul > li.has-sub:hover > a {
  background: #3f3f3f;
  border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
  display: none;
  width: auto;
  position: absolute;
  top: 38px;
  background: #3f3f3f;
  border-radius: 0 0 5px 5px;
  z-index: 999;
  padding: 10px 0;
}
#cssmenu ul li > ul {
  width: 200px;
}
#cssmenu ul ul ul {
  position: absolute;
}
#cssmenu ul ul li:hover > ul {
  left: 100%;
  top: -10px;
  border-radius: 5px;
}
#cssmenu ul li > ul li {
  display: block;
  list-style: inside none;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu ul li > ul li a {
  outline: none;
  display: block;
  position: relative;
  font: 10pt Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 8px 20px;
}
#cssmenu,
#cssmenu ul ul > li:hover > a,
#cssmenu ul ul li a:hover {
  background: #3c3c3c;
  background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
  background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
  background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
  background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
  background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
#cssmenu > ul > li > a:hover {
  background: #080808;
  color: #ffffff;
}
#cssmenu ul ul a:hover {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
  border-top: 5px solid #ffffff;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

#cssmenu,

#cssmenu ul,

#cssmenu li,

#cssmenu a {

border: none;

line-height: 1;

margin: 0;

padding: 0;

}

#cssmenu {

height: 37px;

display: block;

border: 1px solid;

border-radius: 5px;

width: auto;

border-color: #080808;

margin: 0;

padding: 0;

}

#cssmenu > ul {

list-style: inside none;

margin: 0;

padding: 0;

}

#cssmenu > ul > li {

list-style: inside none;

float: left;

display: inline-block;

position: relative;

margin: 0;

padding: 0;

}

#cssmenu.align-center > ul {

text-align: center;

}

#cssmenu.align-center > ul > li {

float: none;

margin-left: -3px;

}

#cssmenu.align-center ul ul {

text-align: left;

}

#cssmenu.align-center > ul > li:first-child > a {

border-radius: 0;

}

#cssmenu > ul > li > a {

outline: none;

display: block;

position: relative;

text-align: center;

text-decoration: none;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

font-weight: 700;

font-size: 13px;

font-family: Arial, Helvetica, sans-serif;

border-right: 1px solid #080808;

color: #ffffff;

padding: 12px 20px;

}

#cssmenu > ul > li:first-child > a {

border-radius: 5px 0 0 5px;

}

#cssmenu > ul > li > a:after {

content: "";

position: absolute;

border-right: 1px solid;

top: -1px;

bottom: -1px;

right: -2px;

z-index: 99;

border-color: #3c3c3c;

}

#cssmenu ul li.has-sub:hover > a:after {

top: 0;

bottom: 0;

}

#cssmenu > ul > li.has-sub > a:before {

content: "";

position: absolute;

top: 18px;

right: 6px;

border: 5px solid transparent;

border-top: 5px solid #ffffff;

}

#cssmenu > ul > li.has-sub:hover > a:before {

top: 19px;

}

#cssmenu > ul > li.has-sub:hover > a {

padding-bottom: 14px;

z-index: 999;

border-color: #3f3f3f;

}

#cssmenu ul li.has-sub:hover > ul,

#cssmenu ul li.has-sub:hover > div {

display: block;

}

#cssmenu > ul > li.has-sub > a:hover,

#cssmenu > ul > li.has-sub:hover > a {

background: #3f3f3f;

border-color: #3f3f3f;

}

#cssmenu ul li > ul,

#cssmenu ul li > div {

display: none;

width: auto;

position: absolute;

top: 38px;

background: #3f3f3f;

border-radius: 0 0 5px 5px;

z-index: 999;

padding: 10px 0;

}

#cssmenu ul li > ul {

width: 200px;

}

#cssmenu ul ul ul {

position: absolute;

}

#cssmenu ul ul li:hover > ul {

left: 100%;

top: -10px;

border-radius: 5px;

}

#cssmenu ul li > ul li {

display: block;

list-style: inside none;

position: relative;

margin: 0;

padding: 0;

}

#cssmenu ul li > ul li a {

outline: none;

display: block;

position: relative;

font: 10pt Arial, Helvetica, sans-serif;

color: #ffffff;

text-decoration: none;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);

margin: 0;

padding: 8px 20px;

}

#cssmenu,

#cssmenu ul ul > li:hover > a,

#cssmenu ul ul li a:hover {

background: #3c3c3c;

background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));

background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);

background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);

background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);

background: linear-gradient(top, #3c3c3c 0%, #222222 100%);

}

#cssmenu > ul > li > a:hover {

background: #080808;

color: #ffffff;

}

#cssmenu ul ul a:hover {

color: #ffffff;

}

#cssmenu > ul > li.has-sub > a:hover:before {

border-top: 5px solid #ffffff;

}

CSS Menü Örnekleri 5

Masaüstü Görünüm:

HTML Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>tasarimkodlama.com</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Anasayfa</span></a></li>
   <li><a href='#'><span>Web Tasarım</span></a></li>
   <li><a href='#'><span>Programlama</span></a></li>
   <li class='last'><a href='#'><span>Veritabanı</span></a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>tasarimkodlama.com</title>

</head>

<body>

<ul>

<li class='active'><a href='#'><span>Anasayfa</span></a></li>

<li><a href='#'><span>Web Tasarım</span></a></li>

<li><a href='#'><span>Programlama</span></a></li>

<li class='last'><a href='#'><span>Veritabanı</span></a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#cssmenu {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#cssmenu ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

100

101

102

103

104

105

106

107

108

109

110

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@charset "UTF-8";

/* Base Styles */

#cssmenu ul,

#cssmenu li,

#cssmenu a {

list-style: none;

margin: 0;

padding: 0;

border: 0;

line-height: 1;

font-family: 'Lato', sans-serif;

}

#cssmenu {

border: 1px solid #133e40;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

width: auto;

}

#cssmenu ul {

zoom: 1;

background: #36b0b6;

background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));

background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);

background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);

background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);

background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);

padding: 5px 10px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

#cssmenu ul:before {

content: '';

display: block;

}

#cssmenu ul:after {

content: '';

display: table;

clear: both;

}

#cssmenu li {

float: left;

margin: 0 5px 0 0;

border: 1px solid transparent;

}

#cssmenu li a {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

padding: 8px 15px 9px 15px;

display: block;

text-decoration: none;

color: #ffffff;

border: 1px solid transparent;

font-size: 16px;

}

#cssmenu li.active {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

border: 1px solid #36b0b6;

}

#cssmenu li.active a {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

display: block;

background: #1e6468;

border: 1px solid #133e40;

-moz-box-shadow: inset 0 5px 10px #133e40;

-webkit-box-shadow: inset 0 5px 10px #133e40;

box-shadow: inset 0 5px 10px #133e40;

}

#cssmenu li:hover {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

border: 1px solid #36b0b6;

}

#cssmenu li:hover a {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

display: block;

background: #1e6468;

border: 1px solid #133e40;

-moz-box-shadow: inset 0 5px 10px #133e40;

-webkit-box-shadow: inset 0 5px 10px #133e40;

box-shadow: inset 0 5px 10px #133e40;

}

CSS Menü Örnekleri 6

Masaüstü Görünüm

HTML Kodları:


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>tasarimkodlama.com</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Anasayfa</span></a></li>
   <li class='active has-sub'><a href='#'><span>Web Tasarım</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>HTML</span></a>
            <ul>
               <li><a href='#'><span>HTML Dersler</span></a></li>
               <li class='last'><a href='#'><span>HTML Örnekler</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>CSS</span></a>
            <ul>
               <li><a href='#'><span>CSS Dersler</span></a></li>
               <li class='last'><a href='#'><span>CSS Örnekler</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Programlama</span></a></li>
   <li class='last'><a href='#'><span>Veritabanı</span></a></li>
</ul>
</div>

</body>
<html>

<!doctype html>

<head>

<title>tasarimkodlama.com</title>

</head>

<body>

<ul>

<li><a href='#'><span>Anasayfa</span></a></li>

<li class='active has-sub'><a href='#'><span>Web Tasarım</span></a>

<ul>

<ul>

<li><a href='#'><span>HTML Dersler</span></a></li>

<li class='last'><a href='#'><span>HTML Örnekler</span></a></li>

</ul>

</li>

<ul>

<li><a href='#'><span>CSS Dersler</span></a></li>

<li class='last'><a href='#'><span>CSS Örnekler</span></a></li>

</ul>

</li>

</ul>

</li>

<li><a href='#'><span>Programlama</span></a></li>

<li class='last'><a href='#'><span>Veritabanı</span></a></li>

</ul>

</div>

</body>

<html>

CSS Kodları (styles.css):


@charset "UTF-8";
/* Some stylesheet reset */
#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
/* The container */
#cssmenu > ul {
  display: block;
  position: relative;
  width: 150px;
 

}
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
  /* Layout */

  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #3a3a3a;
  border-bottom: 1px dotted #1b1b1b;
  padding: 11px 20px;
  /* Typography */

  font-family: Helvetica, Arial, sans-serif;
  color: #d8d8d8;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  font-size: 13px;
  font-weight: 300;
  /* Background & effects */

  background: #282828;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: #54cdf1;
  background: -webkit-linear-gradient(#e28c8c, #f27979);
  background: -moz-linear-gradient(#e28c8c, #f27979);
  background: linear-gradient(#e28c8c, #f27979);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 4px solid transparent;
  border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 4px solid transparent;
  border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #ffffff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 140px;
  /* The fade effect, created using an opacity transition */

  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

@charset "UTF-8";

/* Some stylesheet reset */

#cssmenu > ul {

list-style: none;

margin: 0;

padding: 0;

vertical-align: baseline;

line-height: 1;

}

/* The container */

#cssmenu > ul {

display: block;

position: relative;

width: 150px;

}

#cssmenu > ul li {

display: block;

position: relative;

margin: 0;

padding: 0;

width: 100%;

}

/* General link styling */

#cssmenu > ul li a {

/* Layout */

display: block;

position: relative;

margin: 0;

border-top: 1px dotted #3a3a3a;

border-bottom: 1px dotted #1b1b1b;

padding: 11px 20px;

/* Typography */

font-family: Helvetica, Arial, sans-serif;

color: #d8d8d8;

text-decoration: none;

text-transform: uppercase;

text-shadow: 0 1px 1px #000;

font-size: 13px;

font-weight: 300;

/* Background & effects */

background: #282828;

}

/* Rounded corners for the first link of the menu/submenus */

#cssmenu > ul li:first-child > a {

border-top-left-radius: 4px;

border-top-right-radius: 4px;

border-top: 0;

}

/* Rounded corners for the last link of the menu/submenus */

#cssmenu > ul li:last-child > a {

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

border-bottom: 0;

}

/* The hover state of the menu/submenu links */

#cssmenu > ul li > a:hover,

#cssmenu > ul li:hover > a {

color: #ffffff;

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);

background: #54cdf1;

background: -webkit-linear-gradient(#e28c8c, #f27979);

background: -moz-linear-gradient(#e28c8c, #f27979);

background: linear-gradient(#e28c8c, #f27979);

border-color: transparent;

}

/* The arrow indicating a submenu */

#cssmenu > ul .has-sub > a::after {

content: "";

position: absolute;

top: 16px;

right: 10px;

width: 0px;

height: 0px;

/* Creating the arrow using borders */

border: 4px solid transparent;

border-left: 4px solid #d8d8d8;

}

/* The same arrow, but with a darker color, to create the shadow effect */

#cssmenu > ul .has-sub > a::before {

content: "";

position: absolute;

top: 17px;

right: 10px;

width: 0px;

height: 0px;

/* Creating the arrow using borders */

border: 4px solid transparent;

border-left: 4px solid #000;

}

/* Changing the color of the arrow on hover */

#cssmenu > ul li > a:hover::after,

#cssmenu > ul li:hover > a::after {

border-left: 4px solid #ffffff;

}

#cssmenu > ul li > a:hover::before,

#cssmenu > ul li:hover > a::before {

border-left: 4px solid rgba(0, 0, 0, 0.3);

}

/* THE SUBMENUS */

#cssmenu > ul ul {

position: absolute;

left: 100%;

top: -9999px;

padding-left: 5px;

opacity: 0;

width: 140px;

/* The fade effect, created using an opacity transition */

-webkit-transition: opacity 0.3s ease-in;

-moz-transition: opacity 0.3s ease-in;

transition: opacity 0.3s ease-in;

}

/* Showing the submenu when the user is hovering the parent link */

#cssmenu > ul li:hover > ul {

top: 0px;

opacity: 1;

}

CSS Menü Örnekleri

CSS Menü Örnekleri 1:

CSS Menü Örnekleri 2

CSS Menü Örnekleri 3

CSS Menü Örnekleri 4

CSS Menü Örnekleri 5

CSS Menü Örnekleri 6

Yorum Yap

İptal Et

CSS Menü Örnekleri 1:

CSS Menü Örnekleri 2

CSS Menü Örnekleri 3

CSS Menü Örnekleri 4

CSS Menü Örnekleri 5

CSS Menü Örnekleri 6

Bunları da beğenebilirsiniz

Yorum Yap