Multi level grey horizontal

By

Html5

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
*{
  margin: 0;
  padding:0;
}
body{background-color:#333333;
  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  font-size:0.8em;
}
nav {
  text-align: center;
  margin: 20px 0;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef; 
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 7px;  
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
  }
nav ul li {
  float: left;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
nav ul li:hover a {
      color: #fff;
    }
nav ul li a {
    display: block; padding: 15px 30px;
    color: #757575; text-decoration: none;
  }
nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
  }
nav ul ul li a {
      padding: 15px 30px;
      color: #fff;
    }
nav ul ul li a:hover {
        background: #4b545f;
      }
nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

       <nav>
        	<ul>
        		<li><a href="http://mintik.com">Home</a></li>
        		<li><a href="http://mintik.com/category/webmaster/">Webmaster</a>
        			<ul>
        				<li><a href="http://mintik.com/category/css/">Css3</a></li>
        				<li><a href="http://mintik.com/category/html5/">Html5</a></li>
        				<li><a href="http://mintik.com/category/jquery/">jQuery</a>
        					<ul>
        						<li><a href="http://mintik.com/tag/eklenti/">Plugins</a></li>
        						<li><a href="http://mintik.com/tag/eklenti/">Examples</a></li>
        					</ul>
        				</li>
        			</ul>
        		</li>
        		<li><a href="http://mintik.com/category/scritp/">Script</a>
        			<ul>
        				<li><a href="http://mintik.com/category/php-scriptler/">Php</a></li>
        				<li><a href="http://mintik.com/category/flash/">Asp</a></li>
        			</ul>
        		</li>
        		<li><a href="http://mintik.com/category/wordpress/">Wordpress</a>
        			<ul>
        				<li><a href="http://mintik.com/category/theme/">Theme</a></li>
        				<li><a href="http://mintik.com/category/eklenti/">Plugin</a></li>
        				<li><a href="http://mintik.com/category/wordpress-widget/">Widget</a></li>
        			</ul>
        		</li>

        		<li><a href="http://mintik.com/category/photoshop/">Photoshop</a></li>
        		<li><a href="http://mintik.com/?p=13745">tutorial</a></li>
        	</ul>
        </nav>



1 Comment
  1. Fatih Narin 4 years ago
    Reply

    Merhaba
    Yukarıdaki kodları asp.net için uyarladığımda örnekteki gibi çalışmıyor. Nerede hata yapıyor olabilirim? Asp.net desteklemiyormu? Css stylesheet sayfasında 2.1 sürüm olduğunu görüyorum. Birde nav tagını tanımıyor gibi duruyor.

Leave a Comment

Your email address will not be published.

You may also like

Trend