Ikona Font Awesome wewnątrz elementu wprowadzania tekstu

136

Próbuję wstawić ikonę użytkownika w polu wprowadzania nazwy użytkownika.

Wypróbowałem jedno z rozwiązań z podobnego pytania, wiedząc, że background-imagewłaściwość nie będzie działać, ponieważ Font Awesome jest czcionką.

Oto moje podejście i nie mogę uzyskać wyświetlania ikon.

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

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

Mam zadeklarowaną krój czcionki w domyślnym niesamowitym CSS, więc nie byłem pewien, czy dodanie rodziny czcionek powyżej było właściwym podejściem.

 @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
źródło
Co chcesz wiedzieć? Jakie jest pytanie / błąd?
allcaps
@allcaps Ups… Przyznaję, że nie ma sposobu, aby zidentyfikować błąd, który napotykam, po prostu patrząc na mój oryginalny post. Trochę zredagowałem.
Seong Lee,
Zobacz moją zaktualizowaną odpowiedź.
allcaps

Odpowiedzi:

108

Masz rację. : before i: after pseudo treść nie jest przeznaczona do pracy z zastępowanymi elementami, takimi jak imgi input. Dodanie elementu opakowującego i zadeklarowanie rodziny czcionek jest jedną z możliwości, podobnie jak użycie obrazu tła. A może tekst zastępczy HTML5 pasuje do Twoich potrzeb:

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

Przeglądarki, które nie obsługują atrybutu symbolu zastępczego, po prostu go zignorują.

AKTUALIZACJA

Przed selektor zawartość wybiera wejście: input[type="text"]:before. Należy wybrać opakowanie: .wrapper:before. Zobacz http://jsfiddle.net/allcaps/gA4rx/ . Dodałem również sugestię symbolu zastępczego, w której opakowanie jest zbędne.

.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>

Rezerwowa

Font Awesome używa obszaru prywatnego użytku Unicode (PUA) do przechowywania ikon. Inne znaki nie są obecne i powracają do domyślnych ustawień przeglądarki. To powinno być takie samo, jak każde inne wejście. Jeśli zdefiniujesz czcionkę w elementach wejściowych, podaj tę samą czcionkę jako czcionkę zastępczą w sytuacjach, w których używamy ikony. Lubię to:

input { font-family: 'FontAwesome', YourFont; }
wszystkie duże litery
źródło
4
Używanie metody zastępczej działa. Problem polega na tym, że zwykły tekst (nie będący ikoną) nie odpowiada krojowi czcionki pozostałej części strony i jest wyświetlany jako domyślny szeryf przeglądarki. Jakoś to obejść?
harryg
6
Font Awesome używa obszaru prywatnego użytku Unicode (PUA) do przechowywania ikon. Inne znaki nie są obecne i powracają do domyślnych ustawień przeglądarki. To powinno być takie samo, jak każde inne wejście. Jeśli zdefiniować czcionkę na elementach wejściowych gdzieś, a następnie dostarczyć taką samą czcionką jak awaryjnej sytuacji, gdy nam korzystać ikonę: input { font-family: 'FontAwesome' YourFont; }. czy to pomaga? Zawsze możesz zadać nowe pytanie.
allcaps
1
@allcaps zalecenie użycia zastępczej rodziny czcionek dla symbolu zastępczego działa CUDA !! Nie pomyślałem, żeby zmienić czcionkę przez rezerwę. Czy możesz zaktualizować swoją odpowiedź, dodając czcionkę zastępczą dla przyszłych użytkowników? Dzięki!
ProfileTwist
1
gdzie mogę znaleźć listę kodów. mam na myśli fa-user do & # 61447;
Elyor
1
@Elyor: Nie musisz używać encji html. Jeśli Twój projekt jest w UTF-8, możesz po prostu skopiować i wkleić glif Font awesome. Prawdopodobnie pojawi się jako blok w twoim edytorze kodu, ale to jest w porządku. Możesz również użyć jednego z wielu internetowych konwerterów jednostek Unicode na HTML.
allcaps
123

Wynik:

wprowadź opis obrazu tutaj

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>

(Lub)

Wynik:

wprowadź opis obrazu tutaj

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
źródło
2
To była doskonała wskazówka dotycząca używania niesamowitej czcionki z polem tekstowym.
Sunil
Czy można sprawić, by ta ikona była klikalna?
FrenkyB
5
@FrenkyB, tak. <span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </span>
Palanikumar,
2
Ustawienie z-index: 1spowoduje, że podstawowe dane wejściowe przechwycą fokus po kliknięciu ikony - coś, czego możesz chcieć na przykład podczas dodawania DatePicker.
romaricdrigon
Działa dobrze, ale nie użyłem position: relative(ujemne marginesy tego nie potrzebują) ani z-index(gdy tylko element zostanie wyrenderowany po wejściu)
Pierre de LESPINAY
24

Możesz użyć opakowania. Wewnątrz opakowania dodaj element awesome font i oraz inputelement.

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

następnie ustaw położenie opakowania na względne:

.wrapper { position: relative; }

a następnie ustaw pozycję ielementu na wartość bezwzględną i ustaw dla niego prawidłowe miejsce:

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

(Wiem, że to hack, ale wykonuje swoją pracę).

Mero
źródło
2
Dlaczego potrzebujemy tam .wrapper?
Ashfaque Rifaye
Jak rozumiem, elementy absolutne są umieszczane względem najbliższego „pozycjonowanego” przodka. Pozycja: względna oznacza, że ​​opakowanie jest „ustawione” (mogło być również bezwzględne, stałe lub lepkie). Jeśli tego nie zrobisz, ikona zostanie bezwzględnie ustawiona względem jakiegoś innego elementu wyżej w domenie (lub jeśli nie zostaną znalezione żadne pozycjonowane elementy, względem rzutni).
Jaqen H'ghar
20

Ta odpowiedź będzie działać, jeśli chcesz spełnić następujące warunki (żadna z obecnych odpowiedzi nie spełnia tych warunków):

  1. Ikona znajduje się wewnątrz pola tekstowego
  2. Ikona nie powinna znikać po wprowadzeniu tekstu do wejścia, a wprowadzany tekst trafia na prawo od ikony
  3. Kliknięcie ikony powinno wyostrzyć bazowe dane wejściowe

Uważam, że 3 to minimalna liczba elementów HTML spełniająca te warunki:

.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
źródło
4
Najlepsza odpowiedź, jeśli ikona znajduje się w polu wprowadzania, gdzie ikona pozostaje widoczna, gdy użytkownik pisze.
ObjectiveTC
top: calc (50% - 0.5em) zakłada, że ​​twoja etykieta ma wysokość
1em
1
@drichar - właśnie przetestowałem, to nadal działa z każdą wysokością etykiety. Dopóki tekst etykiety nie zostanie wyrównany w pionie (co nie jest wartością domyślną). Ponieważ jest ona domyślnie wyrównana do góry, wyższa etykieta będzie nadal działać poprawnie. Testowałem również z różnymi rozmiarami czcionek na etykiecie i na wejściu. Wydaje się, że działa we wszystkich scenariuszach.
Skeets
@ SkeetsO'Reilly Stoję poprawione. Mylę je i rem. 0.5em to połowa rozmiaru czcionki. Świetne rozwiązanie, używam go w projekcie (używam tylko niestandardowego SVG, a nie FA, który nie ma rozmiaru czcionki, co doprowadziło do mojego problemu z pozycjonowaniem i błędnego komentarza)
drichar
14

Nie musisz dużo kodować ... po prostu wykonaj następujące kroki:

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

możesz znaleźć linki do Unicode ( fontawesome ) tutaj ...

FontAwesome Unicode dla ikon

Rashid Iqbal
źródło
Co się stanie, jeśli używam już innej rodziny czcionek jako symbolu zastępczego? to nie zadziała. Czy jest jakiś sposób, aby tekst „Szukaj” w „& # xf002 Search” używał niestandardowej czcionki, a Unicode nadal używa fontawesome font?
Sushmit Sagar
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
źródło
Cześć, dołącz małe wyjaśnienie do rozwiązania.
Aditya Thakur
1
Ta odpowiedź zadziała, jeśli chcesz spełnić następujące warunki (żadna z bieżących odpowiedzi nie spełnia tych warunków): Ikona znajduje się wewnątrz pola tekstowego Ikona nie powinna znikać po wprowadzeniu tekstu do pola wejściowego, a wprowadzony tekst przechodzi do po prawej stronie ikony Kliknięcie ikony powinno zwrócić uwagę na podstawowe dane wejściowe Uważam, że 3 to minimalna liczba elementów HTML spełniających warunki
Ola Olushesi
5

Po przeczytaniu różnych wersji tego pytania i przeszukaniu go, znalazłem całkiem czyste, wolne od js rozwiązanie. Jest podobne do rozwiązania @allcaps, ale pozwala uniknąć problemu zmiany czcionki wejściowej na inną niż główna czcionka dokumentu.

Użyj ::input-placeholderatrybutu, aby określić styl tekstu zastępczego. Pozwala to na użycie czcionki ikony jako czcionki zastępczej i treści (lub innej czcionki) jako faktycznego tekstu wejściowego. Obecnie musisz określić selektory specyficzne dla dostawcy.

Działa to dobrze, o ile nie potrzebujesz kombinacji ikony i tekstu w elemencie wejściowym. Jeśli to zrobisz, będziesz musiał pogodzić się z tekstem zastępczym jako domyślną czcionką przeglądarki (zwykły szeryfowy na moim) dla słów.

Np.
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';
}

Baw się z selektorami z prefiksem przeglądarki: http://jsfiddle.net/gA4rx/78/

Pamiętaj, że musisz zdefiniować każdy selektor specyficzny dla przeglądarki jako oddzielną regułę. Jeśli je połączysz, przeglądarka zignoruje to.

harryg
źródło
Chociaż jest to eleganckie rozwiązanie, nie zapewnia oczekiwanego zachowania.
Olivier Refalo
Rzeczywiście, wygląda na to, że przeglądarki Webkit są obecnie jedynymi, które akceptują font-familyten selektor. Możemy tylko mieć nadzieję na szerszą akceptację w przyszłości.
harryg
5

Najłatwiej znalazłem sposób, korzystając z 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.
źródło
2

Osiągnąłem to w ten sposób

  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>

Wynik wygląda następująco:

wynik

Dygresja

Zwróć uwagę, że używam Ruby on Rails, więc mój wynikowy kod wygląda na nieco wysadzony. Kod widoku w slim jest w rzeczywistości bardzo zwięzły:

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
źródło
2

Dla mnie łatwym sposobem na umieszczenie ikony „w” polu tekstowym bez konieczności używania pseudoelementów z niesamowitym unikodem czcionki itp. Jest wprowadzenie tekstu i ikony w elemencie opakowania, który umieścimy względem siebie, a następnie umieść zarówno wejście wyszukiwania, jak i niesamowitą ikonę czcionki.

To samo, co robimy z obrazami tła i tekstem, zrobilibyśmy tutaj. Uważam, że jest to dobre również dla początkujących, ponieważ pozycjonowanie CSS jest czymś, czego początkujący powinien nauczyć się na początku swojej przygody z kodowaniem, więc kod jest łatwy do zrozumienia i ponownego wykorzystania.

    <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
źródło
1

Opierając się na sugestii allcaps. Oto metoda tła z niesamowitą czcionką z najmniejszą ilością HTML:

<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
źródło
1

Utwórz ikonę, którą można kliknąć, aby zaznaczyć element do wprowadzania tekstu.

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>

Po prostu dodaj dowolną ikonę do <i>tagu, z biblioteki Font Awesome i ciesz się wynikami.

Armand
źródło
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
źródło
2
Będzie bardziej pomocne dla OP, jeśli zamieścisz również wyjaśnienie, co robi ten blok kodu!
Kim
0

czysto 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
źródło
1
Czy możesz wyjaśnić swoją odpowiedź?
E. Zeytinci
0

Moim rozwiązaniem było posiadanie względnego pojemnika wokół inputikony do trzymania ikony. Ten zewnętrzny pojemnik ma ::afterikonę z żądaną ikoną, umieszczoną absolutew pojemniku.

HTML:

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

Kod 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
źródło
0

Moje rozwiązanie, aby dodać niesamowitą ikonę czcionki wewnątrz elementu wejściowego. Oto prosty kod umożliwiający dodanie ikony wewnątrz elementu wejściowego. Po prostu skopiuj poniższy kod i umieść tam, gdzie chcesz dodać. lub jeśli chcesz zmienić ikonę, po prostu umieść kod ikony w <i> tagu.

<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>

Soft CodeOn
źródło
2
Odpowiedź jest pomocna, ale zdanie, które jest spamem, jest niedozwolone. Jeśli chcesz mieć coś takiego, możesz umieścić link w swoim profilu.
Makyen
Chociaż ten fragment kodu może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod.
Clijsters
0

Czasami ikona nie pojawia się z powodu wersji Font Awesome. W przypadku wersji 5 css powinien mieć postać

.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;
}
klaudios
źródło
0

Łatwy sposób, ale potrzebujesz 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 -->

wprowadź opis obrazu tutaj

Bacar Pereira
źródło
-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
źródło
-3

Wypróbowałem poniższe rzeczy i naprawdę dobrze działa 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
źródło
1
pytanie dotyczy używania niesamowitych ikon czcionek
chód
-5

Aby to pracować z unicode lub fontawesome, należy dodać spanze classjak poniżej:

W HTML:

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

W 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 cum Promotor
źródło
1
nie spowoduje to umieszczenia ikony wewnątrz pola tekstowego
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
źródło