Oops! Sepertinya ada sedikit kesalahan ...

Code:

<div class="dropdown">
    <input class="dropdown-toggle" type="text">
    <div class="dropdown-text">Account</div>
    <ul class="dropdown-content">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>

Code:

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text::-moz-selection,
.dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
.dropdown-text::selection,
.dropdown-toggle::selection { background: transparent; color: inherit; }

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: .25s ease;
  -moz-transition: .25s ease;
  -ms-transition: .25s ease;
  -o-transition: .25s ease;
  transition: .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  border-color: #c5c5c5;
  box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

tommycoo wrote:Gini mau gak gan ?
[You must be registered and logged in to see this image.]
kalo yang sama kayak forum ini saya belum bisa share,

HTML

Code:

<div class="dropdown">
    <input class="dropdown-toggle" type="text">
    <div class="dropdown-text">Account</div>
    <ul class="dropdown-content">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>

css

Code:

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text::-moz-selection,
.dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
.dropdown-text::selection,
.dropdown-toggle::selection { background: transparent; color: inherit; }

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: .25s ease;
  -moz-transition: .25s ease;
  -ms-transition: .25s ease;
  -o-transition: .25s ease;
  transition: .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  border-color: #c5c5c5;
  box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

Code:

    <div class="dropdown">
        <input class="dropdown-toggle" type="text">
        <div class="dropdown-text">Account</div>
        <ul class="dropdown-content">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Log out</a></li>
        </ul>
      </div>

Code:

    .dropdown {
      position: relative;
      display: inline-block;
      text-align: left;
      width: 132px;
    }

    .dropdown-text::-moz-selection,
    .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
    .dropdown-text::selection,
    .dropdown-toggle::selection { background: transparent; color: inherit; }

    .dropdown-text {
      cursor: pointer;
      position: absolute;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
      width: 100%;
    }

    .dropdown-text:after {
      position: absolute;
      right: 6px;
      top: 15px;
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
    }

    .dropdown-text,
    .dropdown-content a {
      color: #333;
      text-shadow: 0 1px #fff;
    }

    .dropdown-toggle {
      font-size: 0;
      z-index: 1;
      cursor: pointer;
      position: absolute;
      top: 0;
      border: none;
      padding: 0;
      margin: 0 0 0 1px;
      background: transparent;
      text-indent: -10px;
      height: 34px;
      width: 100%;
    }

    .dropdown-toggle:focus {
      outline: 0;
    }

    .dropdown-content {
      -webkit-transition: .25s ease;
      -moz-transition: .25s ease;
      -ms-transition: .25s ease;
      -o-transition: .25s ease;
      transition: .25s ease;
      list-style-type: none;
      position: absolute;
      top: 32px;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility:hidden;
      border-radius: 3px;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      width: 140px;
    }

    .dropdown-content a {
      display: block;
    }

    .dropdown-content a:hover {
      background: #e8e8e8;
    }


    .dropdown-toggle:hover ~ .dropdown-text,
    .dropdown-toggle:focus ~ .dropdown-text {
      background-color: #e8e8e8;
    }

    .dropdown-toggle:focus ~ .dropdown-text {
      border-color: #c5c5c5;
      box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
      z-index: 2;
    }

    .dropdown-toggle:focus ~ .dropdown-text:after {
      border-width: 0 4px 5px 4px;
      border-color: transparent transparent #555 transparent;
    }

    .dropdown-content:hover,
    .dropdown-toggle:focus ~ .dropdown-content {
      opacity: 1;
      visibility:visible;
      top: 42px;
    }

tommycoo wrote:code di bawah ini di letakki dimana aja, di overal header bisa kok

Code:

    <div class="dropdown">
        <input class="dropdown-toggle" type="text">
        <div class="dropdown-text">Account</div>
        <ul class="dropdown-content">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Log out</a></li>
        </ul>
      </div>

terus ini CSSnya (admin > display > color > css stylesheet)

Code:

    .dropdown {
      position: relative;
      display: inline-block;
      text-align: left;
      width: 132px;
    }

    .dropdown-text::-moz-selection,
    .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
    .dropdown-text::selection,
    .dropdown-toggle::selection { background: transparent; color: inherit; }

    .dropdown-text {
      cursor: pointer;
      position: absolute;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
      width: 100%;
    }

    .dropdown-text:after {
      position: absolute;
      right: 6px;
      top: 15px;
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
    }

    .dropdown-text,
    .dropdown-content a {
      color: #333;
      text-shadow: 0 1px #fff;
    }

    .dropdown-toggle {
      font-size: 0;
      z-index: 1;
      cursor: pointer;
      position: absolute;
      top: 0;
      border: none;
      padding: 0;
      margin: 0 0 0 1px;
      background: transparent;
      text-indent: -10px;
      height: 34px;
      width: 100%;
    }

    .dropdown-toggle:focus {
      outline: 0;
    }

    .dropdown-content {
      -webkit-transition: .25s ease;
      -moz-transition: .25s ease;
      -ms-transition: .25s ease;
      -o-transition: .25s ease;
      transition: .25s ease;
      list-style-type: none;
      position: absolute;
      top: 32px;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility:hidden;
      border-radius: 3px;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      width: 140px;
    }

    .dropdown-content a {
      display: block;
    }

    .dropdown-content a:hover {
      background: #e8e8e8;
    }


    .dropdown-toggle:hover ~ .dropdown-text,
    .dropdown-toggle:focus ~ .dropdown-text {
      background-color: #e8e8e8;
    }

    .dropdown-toggle:focus ~ .dropdown-text {
      border-color: #c5c5c5;
      box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
      z-index: 2;
    }

    .dropdown-toggle:focus ~ .dropdown-text:after {
      border-width: 0 4px 5px 4px;
      border-color: transparent transparent #555 transparent;
    }

    .dropdown-content:hover,
    .dropdown-toggle:focus ~ .dropdown-content {
      opacity: 1;
      visibility:visible;
      top: 42px;
    }

metalman wrote:work om, kode html nya masukin di widget aja

[You must be registered and logged in to see this link.]

-Developer K- wrote:

metalman wrote:work om, kode html nya masukin di widget aja

[You must be registered and logged in to see this link.]

mana gue udh daftar di forum loe tapi engga drop down menu -,-

tommycoo wrote:

-Developer K- wrote:

metalman wrote:work om, kode html nya masukin di widget aja

[You must be registered and logged in to see this link.]

mana gue udh daftar di forum loe tapi engga drop down menu -,-

lihat di widget sebelah kanan forumnya gan

Code:

<a id="proA" href="#" style="padding: 12px 12px 7px !important;"><span class="fa_atlanta"></span> <span class="USERNAME"></span> ▼</a>
<div class="proB" style="display:none;">
<div class="proC">
<ul style="border-right: 2px solid grey; box-shadow: 0px 0px 5px grey; width: 40%;">
<li><a href="/profile.forum?mode=editprofile">Informasi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Mengelola Preffensi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">Ganti Signature</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">Ganti Avatar</a></li>
</ul>
<ul style="box-shadow: 0px 0px 5px grey; width: 59%;">
<li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Permintaan Pertemanan</a></li>
<li><a href="/search?search_id=watchsearch">Topik Yang Kamu Lihat</a></li>
<li><a href="/search?search_id=egosearch">Postingan Kamu</a></li>
<li><a href="/search?search_id=unanswered">Postingan Yang Belum Di Jawab</a></li>
</ul>
<div class="copyrightP">Copyright Profile User By Atlanta Forum</div>
</div>
</div>
<script>
$("#proA").click(function() {
$(".proB").fadeToggle("fast");
});
</script>

Code:

.proC {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) grey;
    border-image: none;
    border-radius: 0px 5px 5px 5px;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    padding: 5px;
    position: absolute;
    width: 400px;
    z-index: 999;
    margin-top: -13px;
    margin-left: -1px;
}
.proC ul {
    float: left;
    background: none repeat scroll 0% 0% white;
}
.proC ul li {padding:5px;list-style:none !important;}
.proC ul li:hover{background-color:grey;color:white !important;}
.proC ul li a {
    display: block;
    font-weight: 700;
    color: black !important;
    text-decoration: none;
}

tommycoo wrote:Nih coba letakkin dimana aja

Code:

<a id="proA" href="#" style="padding: 12px 12px 7px !important;"><span class="fa_atlanta"></span> <span class="USERNAME"></span> ▼</a>
<div class="proB" style="display:none;">
<div class="proC">
<ul style="border-right: 2px solid grey; box-shadow: 0px 0px 5px grey; width: 40%;">
<li><a href="/profile.forum?mode=editprofile">Informasi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Mengelola Preffensi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">Ganti Signature</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">Ganti Avatar</a></li>
</ul>
<ul style="box-shadow: 0px 0px 5px grey; width: 59%;">
<li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Permintaan Pertemanan</a></li>
<li><a href="/search?search_id=watchsearch">Topik Yang Kamu Lihat</a></li>
<li><a href="/search?search_id=egosearch">Postingan Kamu</a></li>
<li><a href="/search?search_id=unanswered">Postingan Yang Belum Di Jawab</a></li>
</ul>
<div class="copyrightP">Copyright Profile User By Atlanta Forum</div>
</div>
</div>
<script>
$("#proA").click(function() {
$(".proB").fadeToggle("fast");
});
</script>

CSS

Code:

.proC {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) grey;
    border-image: none;
    border-radius: 0px 5px 5px 5px;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    padding: 5px;
    position: absolute;
    width: 400px;
    z-index: 999;
    margin-top: -13px;
    margin-left: -1px;
}
.proC ul {
    float: left;
    background: none repeat scroll 0% 0% white;
}
.proC ul li {padding:5px;list-style:none !important;}
.proC ul li:hover{background-color:grey;color:white !important;}
.proC ul li a {
    display: block;
    font-weight: 700;
    color: black !important;
    text-decoration: none;
}