Arkadaşlar gerekli kodu buldum. Birçok kod denedim sitenin tasarımını bozuyordu. Fakat bu sağlam kod. Kullanmak isteyen ihtiyacı olan var ise kullanabilir. Sizlerle her türlü tecrübemi paylaşmak isterim. Yapamayan olur ise veya düzenlemek isteyen olur ise yorumda belirtsin yardımcı olurum her türlü.
Sitenize göre kodları düzenlemeleyi unutmayınız.
Görünüm> Harici Başlık Eklenecek;
<ul id="menu">
<li><a href="https://sordumsoruyu.com/">Anasayfa</a></li>
<li>
<a href="https://sordumsoruyu.com/">Genel</a>
<ul>
<li><a href="https://sordumsoruyu.com/users">Üyeler</a></li>
<li><a href="https://sordumsoruyu.com/following">Takip Edilen</a></li>
<li><a href="https://sordumsoruyu.com/tags">Kategoriler</a></li>
<li><a href="https://sordumsoruyu.com/p/2-canl-tv-radyo">CanlıTV İzle</a></li>
</ul>
</li>
<li><a href="#">Deneme</a></li>
<li><a href="#">Deneme 2</a></li>
<li><a href="#">Deneme 3</a></li>
</ul>
Görünüm > Harici CSS en altına eklenecek;
/* Main */
#menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background-color: #111;
background-image: linear-gradient(#3347ff, #33a8ff);
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #fffc00;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 */
color: #fafafa;
}
#menu li:hover > ul {
display: block;
}
/* Sub-menu */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #3347ff;
background-image: linear-gradient(#3347ff, #33a8ff);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #33a8ff,
0 2px 0 #777777;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a {
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #3347ff;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul li:last-child a {
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
