Ikon Font Awesome di dalam elemen input teks

140

Saya mencoba memasukkan ikon pengguna di dalam bidang masukan nama pengguna.

Saya telah mencoba salah satu solusi dari pertanyaan serupa karena mengetahui bahwa background-imageproperti tidak akan berfungsi karena Font Awesome adalah font.

Berikut ini adalah pendekatan saya dan saya tidak bisa mendapatkan tampilan ikon.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

Saya memiliki font face yang dinyatakan dalam font default awesome css jadi saya tidak yakin apakah menambahkan font-family di atas adalah pendekatan yang tepat.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }
Seong Lee
sumber
Apa yang ingin kamu ketahui? Apa pertanyaan / kesalahannya?
allcaps
@allcaps Ups..Saya mengakui bahwa tidak ada cara untuk mengidentifikasi kesalahan yang saya hadapi hanya dengan melihat posting asli saya. Saya mengedit sedikit.
Seong Lee
Lihat jawaban terbaru saya.
allcaps

Jawaban:

110

Kamu benar. : sebelum dan: setelah konten semu tidak dimaksudkan untuk bekerja pada konten imgdan inputelemen yang diganti . Menambahkan elemen pembungkus dan mendeklarasikan font-family adalah salah satu kemungkinannya, seperti halnya menggunakan gambar latar belakang. Atau mungkin teks placeholder html5 sesuai dengan kebutuhan Anda:

<input name="username" placeholder="&#61447;">

Browser yang tidak mendukung atribut placeholder akan mengabaikannya begitu saja.

MEMPERBARUI

Sebelum pemilih konten memilih input: input[type="text"]:before. Anda harus memilih bungkusnya: .wrapper:before. Lihat http://jsfiddle.net/allcaps/gA4rx/ . Saya juga menambahkan saran placeholder di mana pembungkusnya berlebihan.

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Fallback

Font Awesome menggunakan Unicode Private Use Area (PUA) untuk menyimpan ikon. Karakter lain tidak ada dan kembali ke default browser. Itu harus sama dengan masukan lainnya. Jika Anda mendefinisikan font pada elemen input, maka berikan font yang sama sebagai fallback untuk situasi di mana kita menggunakan ikon. Seperti ini:

input { font-family: 'FontAwesome', YourFont; }
allcaps
sumber
4
Menggunakan metode placeholder Anda berhasil. Masalahnya adalah teks normal (non-ikon) tidak cocok dengan font-face halaman lainnya dan ditampilkan sebagai serif default browser. Ada cara untuk menyiasati ini?
harryg
6
Font Awesome menggunakan Unicode Private Use Area (PUA) untuk menyimpan ikon. Karakter lain tidak ada dan kembali ke default browser. Itu harus sama dengan masukan lainnya. Jika anda mendefinisikan font pada elemen masukan suatu tempat, kemudian memasok font yang sama sebagai fallback untuk situasi di mana kita menggunakan ikon: input { font-family: 'FontAwesome' YourFont; }. Apakah ini membantu? Anda selalu dapat mengajukan pertanyaan baru.
allcaps
1
@allcaps rekomendasi untuk menggunakan font-family fallback untuk placeholder berfungsi WONDERS !! Saya tidak berpikir untuk mengubah font melalui fallback. Dapatkah Anda memperbarui jawaban Anda untuk menyertakan font fallback untuk pengguna di masa mendatang? Terima kasih!
ProfileTwist
1
di mana saya dapat menemukan daftar kode. Maksud saya fa-user untuk & # 61447;
Elyor
1
@Elyor: Anda tidak perlu menggunakan entitas html. Jika proyek Anda UTF-8, Anda cukup menyalin dan menempelkan mesin terbang Font awesome. Ini mungkin akan muncul sebagai blok di editor kode Anda, tetapi tidak apa-apa. Anda juga dapat menggunakan salah satu dari banyak konverter unicode-to-html-entity-online.
allcaps
124

Keluaran:

masukkan deskripsi gambar di sini

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Atau)

Keluaran:

masukkan deskripsi gambar di sini

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>
Palanikumar
sumber
2
Itu adalah tip yang sangat bagus dalam menggunakan font-awesome dengan kotak teks.
Sunil
Apakah mungkin membuat ikon itu dapat diklik?
FrenkyB
5
@FrenB, Ya. <span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </span>
Palanikumar
2
Pengaturan z-index: 1akan membuat input yang mendasari menangkap fokus saat Anda mengklik ikon - sesuatu yang mungkin Anda inginkan misalnya saat menambahkan datepicker.
romaricdrigon
Berfungsi dengan baik untuk saya tetapi saya tidak menggunakan position: relative(margin negatif tidak membutuhkannya) atau z-index(segera setelah elemen diberikan setelah input)
Pierre de LESPINAY
25

Anda bisa menggunakan pembungkus. Di dalam bungkusnya, tambahkan elemen font awesome i dan inputelemen.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

kemudian atur posisi pembungkus ke relative:

.wrapper { position: relative; }

lalu setel posisi ielemen ke absolut, dan setel tempat yang benar untuk itu:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(Ini peretasan, saya tahu, tetapi itu menyelesaikan pekerjaan.)

Mero
sumber
2
Mengapa kita membutuhkan .wrapper di sana?
Ashfaque Rifaye
Seperti yang saya pahami, elemen absolut ditempatkan relatif terhadap leluhur 'diposisikan' terdekat. Posisi: relatif berarti pembungkusnya 'diposisikan' (bisa juga absolut, tetap atau lengket). Jika Anda tidak melakukannya, ikon akan benar-benar diposisikan relatif terhadap beberapa elemen lain yang lebih tinggi di dom (atau jika tidak ada elemen yang diposisikan ditemukan, relatif terhadap viewport).
Jaqen H'ghar
22

Jawaban ini akan bekerja untuk Anda jika Anda perlu memenuhi ketentuan berikut (tidak ada jawaban saat ini yang memenuhi ketentuan ini):

  1. Ikonnya ada di dalam kotak teks
  2. Ikon tidak boleh hilang saat teks dimasukkan ke input, dan teks yang dimasukkan berada di sebelah kanan ikon
  3. Mengklik ikon akan membuat input yang mendasari menjadi fokus

Saya percaya bahwa 3 adalah jumlah minimal elemen HTML untuk memenuhi ketentuan ini:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Skeets
sumber
4
Jawaban terbaik karena memiliki ikon di dalam bidang masukan, di mana ikon tetap terlihat saat pengguna mengetik.
ObjectiveTC
atas: calc (50% - 0,5em) menganggap label Anda memiliki tinggi 1em
drichar
1
@drichar - Saya baru saja menguji, ini masih berfungsi dengan tinggi label berapa pun. Selama Anda tidak meratakan teks label secara vertikal di dalam label (yang bukan default) Karena sejajar dengan bagian atas secara default, label yang lebih tinggi masih akan berfungsi dengan benar. Saya juga menguji dengan ukuran font yang berbeda pada label dan masukan. Tampaknya berfungsi di semua skenario.
Skeets
@ SkeetsO'Reilly Saya berdiri dikoreksi. Saya membingungkan mereka dan rem. 0.5em adalah setengah dari ukuran fontnya. Solusi hebat, saya menggunakannya dalam sebuah proyek (hanya menggunakan SVG khusus, bukan FA, yang tidak memiliki ukuran font, yang menyebabkan masalah pemosisian saya, dan komentar salah informasi)
drichar
16

Tidak perlu banyak kode ... cukup ikuti langkah-langkah berikut:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

Anda dapat menemukan tautan ke Unicode ( fontawesome ) di sini ...

FontAwesome Unicode untuk ikon

Rashid Iqbal
sumber
Bagaimana jika saya sudah menggunakan font-family lain untuk placeholder? maka itu tidak akan berhasil. Adakah cara untuk membuat teks "Search" di "& # xf002 Search" menggunakan font khusus dan unicode masih menggunakan font fontawesome?
Sushmit Sagar
6

Setelah membaca berbagai versi dari pertanyaan ini dan mencari-cari, saya menemukan solusi yang cukup bersih, bebas js,. Ini mirip dengan solusi @allcaps tetapi menghindari masalah font input diubah dari font dokumen utama.

Gunakan ::input-placeholderatribut untuk memberi gaya khusus pada teks placeholder. Ini memungkinkan Anda untuk menggunakan font ikon Anda sebagai font placeholder dan isi Anda (atau font lain) sebagai teks input yang sebenarnya. Saat ini Anda perlu menentukan pemilih khusus vendor.

Ini berfungsi dengan baik selama Anda tidak memerlukan kombinasi ikon dan teks dalam elemen masukan Anda. Jika Anda melakukannya maka Anda harus siap dengan teks placeholder menjadi font browser default (serif biasa pada saya) untuk kata-kata.

Misalnya
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Bermain-main dengan pemilih berawalan browser: http://jsfiddle.net/gA4rx/78/

Perhatikan bahwa Anda perlu menentukan setiap pemilih khusus browser sebagai aturan terpisah. Jika Anda menggabungkannya, browser akan mengabaikannya.

harryg
sumber
Meskipun ini adalah solusi yang elegan, namun tidak mencapai perilaku yang diharapkan.
Olivier Refalo
Memang, tampaknya browser Webkit adalah satu-satunya yang menerima font-familypemilih ini saat ini. Kami hanya bisa berharap penerimaan yang lebih luas di masa depan.
harryg
6

Saya menemukan cara termudah menggunakan bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>
Henry O.
sumber
6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Ola Olushesi
sumber
Hai mohon lampirkan sedikit penjelasan solusinya untuk anda.
Aditya Thakur
1
Jawaban ini akan bekerja untuk Anda jika Anda perlu memenuhi persyaratan berikut (tidak ada jawaban saat ini yang memenuhi ketentuan ini): Ikon ada di dalam kotak teks Ikon tidak boleh hilang saat teks dimasukkan ke masukan, dan teks yang dimasukkan masuk ke di sebelah kanan ikon Mengklik ikon akan membawa masukan yang mendasarinya ke dalam fokus Saya yakin bahwa 3 adalah jumlah minimal elemen HTML untuk memenuhi ketentuan
Ola Olushesi
2

Saya mencapai ini seperti itu

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

Hasilnya terlihat seperti ini:

hasil

Catatan samping

Harap dicatat bahwa saya menggunakan Ruby on Rails sehingga kode yang saya hasilkan terlihat sedikit berlebihan. Kode tampilan dalam slim sebenarnya sangat ringkas:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false
Besi
sumber
2

Bagi saya, cara mudah untuk memiliki ikon "di dalam" input teks tanpa harus mencoba menggunakan pseudo-elements dengan font awesome unicode dll, adalah dengan memiliki input teks dan ikon di dalam elemen pembungkus yang akan kita posisikan secara relatif, dan kemudian posisikan input pencarian dan ikon font mengagumkan secara absolut.

Cara yang sama kita lakukan dengan gambar latar belakang dan teks, kita lakukan di sini. Saya rasa ini bagus untuk pemula juga, karena pemosisian css adalah sesuatu yang harus dipelajari oleh pemula di awal perjalanan pengkodean mereka, sehingga kodenya mudah dipahami dan digunakan kembali.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }
Gerard
sumber
1

Membangun di atas saran allcaps. Berikut adalah metode latar belakang font-mengagumkan dengan jumlah HTML paling sedikit:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}
Jonathan
sumber
1

Buat ikon yang dapat diklik untuk fokus di dalam elemen input teks.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Cukup tambahkan ikon mana saja yang Anda suka di dalam <i>tag, dari perpustakaan Font Awesome dan nikmati hasilnya.

Armand
sumber
0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>
Richard Emert
sumber
2
Akan lebih membantu OP jika Anda juga memposting beberapa penjelasan tentang apa yang dilakukan blok kode ini!
Kim
0

murni CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}
Rocky WEI
sumber
1
Bisakah Anda menjelaskan jawaban Anda?
E. Zeytinci
0

Solusi saya adalah memiliki wadah relatif di sekitar inputuntuk memegang ikon. Kontainer luar itu memiliki ::afterikon yang diinginkan, ditempatkan absolutedi dalam wadah.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

Kode SASS:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}
Floris
sumber
0

Solusi Saya untuk menambahkan ikon font-mengagumkan di dalam elemen input. Berikut adalah kode sederhana untuk menambahkan ikon di dalam elemen input. Cukup salin kode di bawah ini dan taruh di tempat yang ingin Anda tambahkan. atau jika Anda ingin mengubah ikon maka cukup masukkan kode ikon Anda di <i> tag.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>

CodeOn lembut
sumber
2
Jawabannya membantu, tetapi kalimat yang merupakan spam tidak diperbolehkan. Jika Anda ingin memiliki yang seperti itu, Anda dapat meletakkan link di profil Anda.
Makyen
Meskipun cuplikan kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda.
Clijsters
0

Terkadang ikon tidak muncul karena versi Font Awesome. Untuk versi 5, css harus

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}
claudios.dll
sumber
0

Caranya mudah, tetapi Anda membutuhkan bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

masukkan deskripsi gambar di sini

Bacar Pereira
sumber
-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">
nobjta_9x_tq
sumber
-3

Saya mencoba hal-hal di bawah ini dan itu benar-benar berfungsi dengan baik HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>

Sandid
sumber
1
pertanyaannya adalah tentang menggunakan ikon font yang mengagumkan
gaya berjalan
-5

Untuk mengerjakan ini dengan unicode atau fontawesome, Anda harus menambahkan spandengan classseperti di bawah ini:

Dalam HTML:

<span class="button1 search"></span>
<input name="username">

Di CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}
Web Designer sekaligus Promotor
sumber
1
ini tidak akan menempatkan ikon di dalam input teks
Gianfranco P.
-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>
ankit
sumber