Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

ASK: Bagaimanakah mengatasi tampilan menu drop down yang salah ?

Salam para master, lama tidak jumpa.
Begini para master sekalian, mohon bantuannya saya ada susunan menu sperti berikut:


HOME

UJIAN
   -  Online
   -  Kartu Ujian
   -  Peserta
      *  Ujian Seleksi Masuk
      *  Ujian Nasional
   -  Persentase Kelulusan UN

FASILITAS



dan saya tampilkan seperti susunan berikut (horizontal) :



HOME      UJIAN       FASILITAS



lalu ketika saya sorot menu UJIAN dan tampilan pun jadi berantakan  :



HOME      UJIAN      

ONLINE      KARTU UJIAN       PESERTA

UJIAN SELEKSI MASUK     UJIAN NASIONAL

PERSENTASE KELULUSAN UJIAN NASIONAL

FASILITAS




kira kira saya saya salah dimana ? saya pengennya ketika saya sorot menu UJIAN terjadi "menu drop down" dan menu tersusun rapi ke bawah, satu garis dengan MENU UTAMA (UJIAN).


Demikian, atas bantuan dan koreksinya, saya ucapkan terima kasih.


==Christoph Manao==

Comments

  • coba di share code html & css-nya juga.
  • edited September 2016
    menu.html
    =========

    <div id="nav">
                 <ul>
                    <li><a href=""><span>HOME</span></a></li>
                    <li><a href=""><span>PENDAFTARAN &nbsp;SISWA &nbsp;BARU</span></a></li>
                   
                    <li><a href="#"><span>UJIAN</span></a>
                       <ul>
                          <li><a href=""><span>Online</span></a></li>
                          <li><a href=""><span>Kartu Ujian</span></a></li> 
                          <li><a href="#"><span>Peserta</span></a>
                            <ul>
                               <li><a href=""><span>Ujian Seleksi Masuk</span></a></li>
                               <li><a href=""><span>Ujian Nasional</span></a></li>
                            </ul>
                          </li>
                          <li><a href=""><span>Persentase Kelulusan Ujian Nasional</span></a></li>  
                       </ul>
                    </li>
                   
                    <li><a href="#"><span>FASILITAS</span></a>
                    <ul>
                          <li><a href=""><span>Kegiatan Belajar Mengajar</span></a></li>
                          <li><a href=""><span>Kegiatan Siswa</span></a></li> 
                       </ul>       
                    </li>

    </ul></div>



    navigasi.css
    ===========


    /*Navigation*/

    #nav {
        clear: both;   
        padding: 0;       
    }

    #nav ul {
        float: left;
        list-style: none;  
        width: 821px;
        height: 30;
        text-transform: uppercase;
        margin: 0 0 0 0px;
        padding: 0;   
        display: inline;
    }

    #nav ul li ul {
        display: none;
        margin: 0; padding: 0;
    }


    #nav ul li:hover ul {
    display: block;
    float: left;
    }


    #nav ul li a {
        display: block;
        float: left;
        width: auto;
        margin: 0;
        padding: 0 14px;
        border-right: 0px solid #899D00;
        border-left: 0px solid #F8FAF9;
        border-bottom: none;
        color: #FFF;
        font:  bold 11px/2.5em "arial", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
        height: 25px;
        text-transform: uppercase;
        text-decoration: none;   
        letter-spacing: 0px;
    }

    /*End of navigation*/


  • coba pake bootstrap deh..
    itu di UL sama LI nya ga di masukin class ?
     
    kalo saya yah pake bootstrap jadi cth :

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">   
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Data Master
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">User</a></li>
            <li><a href="#">Type</a></li>
            <li><a href="#">Brend</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Department</a></li>
          </ul>
        </li>
      </ul>
    </div>

    ada kemungkinan salah di css nya berhubung saya ga gitu ngerti masalah css jadi saya cuma bisa bantu seperti di atas.. semoga membantu
    :-$
  • edited September 2016
    sy ada ganti susunan-nya sedikit karena terhalang.
    di usahakan untuk membuat menu (judul menu-nya simple), kalo terlalu panjang yg child-nya jd ketimpa (bisa di edit lg sih pk css cuman jd lbh ribet aj), mknya sy ubah susunan-nya agar child-nya ngga ketimpa.


  • Sudah pas, jadi salahnya hanya karena tulisan utk menunya kepanjangan ya....? Terima kasih. Apa ada perubahan pada kode cssnya ?
  • edited September 2016

  • edited September 2016
    terima kasih atas bantuannya, sudah saya coba, lumayan ada kemajuan.

    menu UJIAN disorot, tampilan :

    HOME         PENDAFTARAN SISWA BAru       UJIAN    FASILITAS

                                                        ONLINE     KARTU UJIAN     PERS. KELULUSAN UN       PESERTA

                                                                                             UJIAN SELEKSI MASUK UJIAN NASIONAL


    menu UJIAN disorot tampilan menu tidak terurut ke bawah dan menu untuk PESERTA langsung tampil bersamaan dengan menu yang lain.  apa mungkin karena pengaruh style yang lain ya... ? tampilan jadi terbatas.
Sign In or Register to comment.