Lanebu Stil Açılan Üst Menü

Lanebu temasında kullandığım üst menüyü paylaşıyorum. İş görür bir menu bence. Sizinde işinize yarayacağını düşünüyorum.

]]></b:skin> kodunu bulun ve aşağıdaki kodu üstüne ekleyin.


.pcss3mm {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.pcss3mm * {
margin: 0;
padding: 0;
border: 0;
outline: none;
}


/**/
/* level 1 */
/**/
.pcss3mm {
position: fixed;
z-index: 999;
border-radius: 5px;
box-shadow: 0 0 10px rgba(76,76,76,0.25);
font-size: 0;
line-iight: 0;
text-align: center;
width: 100%;
}
.pcss3mm-fixed {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
border-radius: 0;
}
.pcss3mm:after {
content: '';
display: table;
clear: both;
}
.pcss3mm li {
position: relative;
display: inline-block;
float: center;
text-align: left;
}
.pcss3mm a {
position: relative;
display: block;
padding: 0 17px;
text-decoration: none;
}
.pcss3mm i {
display: block;
float: left;
margin-right: 7px;
  font-family: FontAwesome;
  font-style: normal;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.pcss3mm li:first-child {
border-radius: 5px 0 0 5px;
}
.pcss3mm li:first-child > a {
border-radius: 4px 0 0 4px;
}
.pcss3mm li:last-child {
border-radius: 0 5px 5px 0;
}
.pcss3mm li:last-child > a {
border-radius: 0 4px 4px 0;
}
.pcss3mm .dropdown > a {
padding-right: 30px;
}
.pcss3mm .dropdown > a:after {
position: absolute;
top: 50%;
right: 20px;
width: 0;
height: 0;
margin-top: -1px;
border-top: 4px solid #a6a6a6;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
}
.pcss3mm .dropdown > b {
content: '';
position: absolute;
z-index: 1001;
top: 100%;
left: -9999px;
width: 100%;
height: 6px;
opacity: 0;
transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
}
.pcss3mm .dropdown > div {
position: absolute;
z-index: 1000;
top: 100%;
left: -9999px;
margin-top: 6px;
border-radius: 0 5px 5px 5px;
box-shadow: 0 0 6px rgba(76,76,76,0.25);
opacity: 0;
transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
}
.pcss3mm .dropdown:hover > b {
left: 0;
opacity: 1;
}
.pcss3mm .dropdown:hover > div {
left: 0;
opacity: 1;
}
.pcss3mm .dropdown:first-child:hover {
border-radius: 5px 0 0 0;
}
.pcss3mm .dropdown:first-child:hover > a {
border-radius: 4px 0 0 0;
}
.pcss3mm .dropdown:last-child:hover {
border-radius: 0 5px 0 0;
}
.pcss3mm .dropdown:last-child:hover > a {
border-radius: 0 4px 0 0;
}


/**/
/* level 2 */
/**/
.pcss3mm ul li {
display: block;
float: none;
border-top-width: 1px;
border-right-width: 0;
border-style: solid;
border-right-width: 1px;
}
.pcss3mm ul li:first-child {
border-top: 0;
border-radius: 0 5px 0 0;
}
.pcss3mm ul li:first-child > a {
border-radius: 0 4px 0 0;
}
.pcss3mm ul li:last-child {
border-radius: 0 0 5px 5px;
}
.pcss3mm ul li:last-child a {
border-radius: 0 0 4px 4px;
}
.pcss3mm ul .dropdown > b {
display: none;
}
.pcss3mm ul .dropdown > div {
top: 22px;
margin-left: -30px;
border-radius: 5px;
}
.pcss3mm ul .dropdown:hover > div {
left: 100%;
}
.pcss3mm ul .dropdown:first-child:hover {
border-radius: 0 5px 0 0;
}
.pcss3mm ul .dropdown:first-child:hover > a {
border-radius: 0 4px 0 0;
}
.pcss3mm ul .dropdown:last-child:hover {
border-radius: 0 0 5px 5px;
}
.pcss3mm ul .dropdown:last-child:hover > a {
border-radius: 0 0 4px 4px;
}


/**/
/* level 3+ */
/**/
.pcss3mm ul ul li:first-child {
border-radius: 5px 5px 0 0;
}
.pcss3mm ul ul li:first-child > a {
border-radius: 4px 4px 0 0;
}
.pcss3mm ul ul .dropdown:first-child:hover {
border-radius: 5px 5px 0 0;
}
.pcss3mm ul ul .dropdown:first-child:hover > a {
border-radius: 4px 4px 0 0;
}


/**/
/* right alignment */
/**/
.pcss3mm .right {
float: none;
border-right-width: 0;
border-left-width: 1px;
}
.pcss3mm .right.dropdown > div {
border-radius: 5px 0 5px 5px;
}
.pcss3mm .right.dropdown:hover > div {
right: 0;
left: auto;
}
.pcss3mm .right ul li:first-child {
border-radius: 5px 0 0 0;
}
.pcss3mm .right ul li:first-child > a {
border-radius: 4px 0 0 0;
}


/**/
/* grid */
/**/
.pcss3mm .grid-column {
float: left;
border-left-width: 1px;
border-left-style: solid;
}
.pcss3mm .grid-column:first-child {
margin-left: 0;
border-left: 0;
}
.pcss3mm .grid-column2,
.pcss3mm .grid-container2 {
width: 155px;
}
.pcss3mm .grid-column3,
.pcss3mm .grid-container3 {
width: 233px;
}
.pcss3mm .grid-column4,
.pcss3mm .grid-container4 {
width: 311px;
}
.pcss3mm .grid-column5,
.pcss3mm .grid-container5 {
width: 389px;
}
.pcss3mm .grid-column6,
.pcss3mm .grid-container6 {
width: 467px;
}
.pcss3mm .grid-column7,
.pcss3mm .grid-container7 {
width: 545px;
}
.pcss3mm .grid-column8,
.pcss3mm .grid-container8 {
width: 623px;
}
.pcss3mm .grid-column9,
.pcss3mm .grid-container9 {
width: 701px;
}
.pcss3mm .grid-column10,
.pcss3mm .grid-container10 {
width: 779px;
}
.pcss3mm .grid-column11,
.pcss3mm .grid-container11 {
width: 857px;
}
.pcss3mm .grid-column12,
.pcss3mm .grid-container12 {
width: 935px;
}
.pcss3mm .grid-column ul li:first-child,
.pcss3mm .grid-column ul li:first-child > a,
.pcss3mm .grid-column ul li:last-child,
.pcss3mm .grid-column ul li:last-child > a {
border-radius: 0;
}
.pcss3mm .grid-column:first-child ul li:last-child {
border-bottom-left-radius: 5px;
}
.pcss3mm .grid-column:first-child ul li:last-child > a {
border-bottom-left-radius: 4px;
}
.pcss3mm .grid-column:last-child ul li:first-child {
border-top-right-radius: 5px;
}
.pcss3mm .grid-column:last-child ul li:first-child > a {
border-top-right-radius: 4px;
}
.pcss3mm .grid-column:last-child ul li:last-child {
border-bottom-right-radius: 5px;
}
.pcss3mm .grid-column:last-child ul li:last-child > a {
border-bottom-right-radius: 4px;
}
.pcss3mm .right .grid-column:first-child ul li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 0;
}
.pcss3mm .right .grid-column:first-child ul li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 0;
}
.pcss3mm .right .grid-column:last-child ul li:first-child {
border-radius: 0;
}
.pcss3mm .right .grid-column:last-child ul li:first-child > a {
border-radius: 0;
}


/**/
/* collapsable */
/**/
.pcss3mm-collapsable .opener {
position: absolute;
left: -9999px;
}



/*----------------------------------------------------------------------------*/
/*                                    FORMS                                   */
/*----------------------------------------------------------------------------*/

.pcss3mm :-moz-placeholder {
color: #ccc;
}
.pcss3mm ::-moz-placeholder {
color: #ccc;
}
.pcss3mm :-ms-input-placeholder {
color: #ccc;
}
.pcss3mm ::-webkit-input-placeholder {
color: #ccc;
}

.pcss3mm form {
padding: 20px 20px 10px;
text-align: right;
}
.pcss3mm form:after {
content: '';
display: table;
clear: both;
}
.pcss3mm form a {
display: block;
float: right;
margin-right: 20px;
padding: 0;
text-decoration: underline;
font-size: 12px;
line-height: 34px;
}
.pcss3mm form a:hover {
background: none;
text-decoration: none;
}
.pcss3mm input,
.pcss3mm textarea,
.pcss3mm button {
display: block;
width: 100%;
height: 34px;
margin-bottom: 10px;
padding: 7px 10px 7px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #f2f2f2;
font-size: 13px;
line-height: 18px;
color: #404040;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.pcss3mm input:focus,
.pcss3mm textarea:focus {
border: 1px solid rgba(0,0,0,0.3);
background: #fff;
}
.pcss3mm textarea {
height: 90px;
resize: none;
}
.pcss3mm button {
position: relative;
display: block;
float: right;
width: auto;
margin-bottom: 10px;
padding: 0 20px;
font-size: 14px;
line-height: 32px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
.pcss3mm button:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
background-image: linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -o-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -ms-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -moz-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -webkit-linear-gradient(bottom, #000 0%, #fff 100%);
opacity: 0.15;
}
.pcss3mm button::-moz-focus-inner {
border: none;
}





/*----------------------------------------------------------------------------*/
/*                               RESPONSIVENESS                               */
/*----------------------------------------------------------------------------*/

/**/
/* wide */
/**/
@media screen and (min-width: 1240px) {
.page {
width: 1200px;
}
}


/**/
/* pad */
/**/
@media screen and (max-width: 980px) {
.pcss3mm .grid-column2,
.pcss3mm .grid-container2 {
width: 117px;
}
.pcss3mm .grid-column3,
.pcss3mm .grid-container3 {
width: 176px;
}
.pcss3mm .grid-column4,
.pcss3mm .grid-container4 {
width: 235px;
}
.pcss3mm .grid-column5,
.pcss3mm .grid-container5 {
width: 294px;
}
.pcss3mm .grid-column6,
.pcss3mm .grid-container6 {
width: 353px;
}
.pcss3mm .grid-column7,
.pcss3mm .grid-container7 {
width: 412px;
}
.pcss3mm .grid-column8,
.pcss3mm .grid-container8 {
width: 471px;
}
.pcss3mm .grid-column9,
.pcss3mm .grid-container9 {
width: 530px;
}
.pcss3mm .grid-column10,
.pcss3mm .grid-container10 {
width: 589px;
}
.pcss3mm .grid-column11,
.pcss3mm .grid-container11 {
width: 648px;
}
.pcss3mm .grid-column12,
.pcss3mm .grid-container12 {
width: 707px;
}
}


/**/
/* phone */
/**/
@media screen and (max-width: 767px) {
body {
    -webkit-text-size-adjust: none;
  }
.pcss3mm li {
display: block;
float: none;
border: 0;
border-top: 1px solid #d9d9d9;
}
.pcss3mm i {
 width: 52px;
 margin: 0 -7px 0 -19px;
 text-align: center;
}
.pcss3mm li:first-child {
border-top: 0;
border-radius: 5px 5px 0 0;
}
.pcss3mm li:first-child > a {
border-radius: 4px 4px 0 0;
}
.pcss3mm li:last-child {
border-radius: 0 0 5px 5px;
}
.pcss3mm li:last-child > a {
border-radius: 0 0 4px 4px;
}
.pcss3mm .dropdown > b {
display: none;
}
.pcss3mm .dropdown > div {
position: static;
width: auto;
height: 0;
overflow: hidden;
border-radius: 0;
box-shadow: none;
}
.pcss3mm .dropdown:hover > div {
height: auto;
margin: 1px 0 -1px;
border-top: 1px solid #d9d9d9;
}
.pcss3mm .dropdown:first-child:hover {
border-radius: 5px 5px 0 0;
}
.pcss3mm .dropdown:first-child:hover > a {
border-radius: 4px 4px 0 0;
}
.pcss3mm .dropdown:last-child:hover {
border-radius: 0;
}
.pcss3mm .dropdown:last-child:hover > a {
border-radius: 0;
}

.pcss3mm ul li {
padding: 1px 0;
}
.pcss3mm ul a {
padding: 11px 19px 11px 38px;
line-height: 18px;
}
.pcss3mm ul li:first-child {
border-radius: 0;
}
.pcss3mm ul li:first-child > a {
border-radius: 0;
}
.pcss3mm ul li:last-child {
border-radius: 0;
}
.pcss3mm ul li:last-child a {
border-radius: 0;
}
.pcss3mm ul .dropdown > div {
margin-left: 0;
border-radius: 0;
}
.pcss3mm ul .dropdown:first-child:hover {
border-radius: 0;
}
.pcss3mm ul .dropdown:first-child:hover > a {
border-radius: 0;
}
.pcss3mm ul .dropdown:last-child:hover {
border-radius: 0;
}
.pcss3mm ul .dropdown:last-child:hover > a {
border-radius: 0;
}

.pcss3mm ul ul a {
padding-left: 57px;
}
.pcss3mm ul ul li:first-child {
border-radius: 0;
}
.pcss3mm ul ul li:first-child > a {
border-radius: 0;
}
.pcss3mm ul ul .dropdown:first-child:hover {
border-radius: 0;
}
.pcss3mm ul ul .dropdown:first-child:hover > a {
border-radius: 0;
}

.pcss3mm ul ul ul a {
padding-left: 76px;
}


.pcss3mm .right {
border-left: 0;
}
.pcss3mm .right.dropdown > div {
border-radius: 0;
}
.pcss3mm .right ul li:first-child {
border-radius: 0;
}
.pcss3mm .right ul li:first-child > a {
border-radius: 0;
}


.pcss3mm .grid-column {
float: none;
width: auto;
margin: 0;
border: 0;
border-top: 1px solid #d9d9d9;
}
.pcss3mm .grid-column:first-child {
border-top: 0;
}
.pcss3mm .grid-column:first-child ul li:last-child,
.pcss3mm .grid-column:first-child ul li:last-child > a,
.pcss3mm .grid-column:last-child ul li:first-child,
.pcss3mm .grid-column:last-child ul li:first-child > a,
.pcss3mm .grid-column:last-child ul li:last-child,
.pcss3mm .grid-column:last-child ul li:last-child > a,
.pcss3mm .right .grid-column:first-child ul li:first-child,
.pcss3mm .right .grid-column:first-child ul li:first-child > a {
border-radius: 0;
}


.pcss3mm-collapsable li {
position: absolute;
left: -9999px;
}
.pcss3mm-collapsable .opener {
position: relative;
left: 0;
}
.pcss3mm-collapsable:hover li {
position: relative;
left: 0;
}
.pcss3mm-collapsable:hover .opener {
position: absolute;
left: -9999px;
}
}



/*----------------------------------------------------------------------------*/
/*                               CUSTOMIZATION                                */
/*----------------------------------------------------------------------------*/

.pcss3mm,
.pcss3mm input,
.pcss3mm textarea,
.pcss3mm button {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.pcss3mm {
background: #ffffff;
}
.pcss3mm li {
border-color: #d9d9d9;
background: #ffffff;
font-size: 13px;
line-height: 52px;
}
.pcss3mm a {
color: #000;
}
.pcss3mm a:hover {
background: #f2f2f2;
color: #2b82d9;
}
.pcss3mm a.active {
color: #2b82d9;
}
.pcss3mm .dropdown > div {
background: #ffffff;
}
.pcss3mm .dropdown > a:after {
border-top-color: #a6a6a6;
}
.pcss3mm .dropdown > a.active:after {
border-top-color: #2b82d9;
}
.pcss3mm .dropdown > b {
background: #ffffff;
}
.pcss3mm .dropdown:hover > a {
color: #2b82d9;
}
.pcss3mm .dropdown:hover > a:after {
border-top-color: #2b82d9;
}
.pcss3mm ul li {
background: #ffffff;
line-height: 17px;
}
.pcss3mm ul a {
padding-top: 17px;
padding-bottom: 17px;
}
.pcss3mm .grid-column {
border-color: #d9d9d9;
}




#search_BH {
}
#search_BH input[type="text"] {
    background: #ff;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 300px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search_BH input[type="text"]:focus {
    width: 300px;
    }

Altta ki koduda <head>  kodunu bulup üstüne ekliyorsunuz.

<!-- mega menu with forms -->
<ul class='pcss3mm'>
<!-- Anasayfa -->
<li>
                  <a href='/'><img src='https://lh3.googleusercontent.com/-JCEXzo5qJ1M/VacHk5VwHmI/AAAAAAAARnM/_NaQNZA1NUY/h114/logo.png' title='Anasayfa'/></a>
</li>
<!--/ Anasayfa -->
<li>
 <form action='/search' id='search_BH' method='get'>
  <input name='q' placeholder='Aramak istediğiniz kelime... ' size='40' type='text'/>
</form>
  </li>
                  <li><a href='#'><img src='https://lh3.googleusercontent.com/-fAkrlvhyvFE/Vabk7JziZJI/AAAAAAAARmI/jn7iccxn6e8/h120/anasayfa.png'/> Anasayfa</a></li>
<!-- portfolio -->
<li class='dropdown'>
<a href='#'><img src='https://lh3.googleusercontent.com/-XxQ7ILFGRq4/Vabk8Ux9D_I/AAAAAAAARmA/BpXrp7yGm5M/h120/haberler.png'/> İçerik</a><b/>
<div class='grid-container3'>
<ul>

<li><a href='/search?q=haber'>Haberler</a></li>
<li><a href='/search?q=sinema'>Sinema</a></li>
<li><a href='/search?q=komik'>Komikler</a></li>
</ul>
</div>
</li>
<!--/ portfolio -->
<!-- home -->
<li>
                  <a href='/search?q=galeri'><img src='https://lh3.googleusercontent.com/-gwCatmrBWKg/Vabk7ZCoyfI/AAAAAAAARls/D8gzWIOJE2w/h120/galeri.png'/> Galeriler</a>
</li>
<li>
<a href='/search?q=video'><img src='https://lh3.googleusercontent.com/-oIRD9_q6cbE/Vabk8MuscgI/AAAAAAAARl4/xIbic2WDgRM/h120/videolar.png'/> Videolar</a>
</li>

<!--/ home -->



  <!-- search -->
<li class='right dropdown'>
                  <a href='/p/iletisim.html'><img src='https://lh3.googleusercontent.com/-uGmqihhmA1c/VaeQ3pBfuxI/AAAAAAAARng/wvE4YXzTv2U/h120/bize-yaz%25C4%25B1n.png'/> İçerik Ekle</a>
<b/>
<div class='grid-container5'>

</div>
  </li>
  <!--/ search -->
</ul>