In the following lines of CSS code:
.sf-menu li:hover ul, .sf-menu li.sfHover ul {top: 40px!important; }What do the HTML tags <ul> and <li> mean?
asked Jul 2, 2012 at 22:12
Arthur Mamou-ManiArthur Mamou-Mani
2,25310 gold badges42 silver badges65 bronze badges
1
It's from the HTML elements of the same name.
UL - Unordered List (an
ordered, or numbered, list would be OL)
LI - List Item
answered Jul 2, 2012 at 22:13
craig65535craig65535
3,2891 gold badge22 silver badges48 bronze badges
ul stands for unordered list.
li stands for list item.
They are the HTML tags for "bulleted" lists as opposed to "numbered" lists (which are specified by ol for ordered list).
answered Jul 2, 2012 at 22:14
tskuzzytskuzzy
35.2k14 gold badges70 silver badges136 bronze badges
They target <ul> and <li> elements in the page.
In CSS an id is prefixed by #, a class is prefixed by ., and an element has no prefix at all.
So the selector .sf-menu li:hover ul will apply to any <ul> element, inside an <li> element that you are currently pointing at, inside an element with class="sf-menu".
The selector .sf-menu li.sfHover ul will apply to any <ul> element, inside an <li> element with class="sfHover", inside an element with class="sf-menu".
answered Jul 2, 2012 at 22:13
GuffaGuffa
672k108 gold badges718 silver badges991 bronze badges
If you're seeing this message, it means we're having trouble loading external resources on our website.
If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.
HTML element ul (un-ordered list) merupakan elemen HTML yang digunakan untuk menampilkan daftar (list) dalam bentuk butir-butir peluru atau bulet. Daftar list yang ditampilkan tidak dalam bentuk urutan angka maupun huruf namun ditampilkan dalam bentuk bulet atau titik kecil sebagai penanda daftar. Penggunaan elemen ini biasanya untuk daftar/list yang bersifat non-formal atau tak resmi.
HTML element <ul> (un-ordered list) ini juga bisa disebut sebagai daftar acak untuk menampilkan daftar item secara acak tanpa penomoran yang formal. Penulisan elemen ini dibuka dengan tag <ul> dan ditutup dengan </ul>. Isi butir-butir daftar dimasukkan di dalam <li> (list item) di antara tag <li> dan <li>. Setiap item daftar nantinya akan ditampilkan dalam bentuk butir-butir bulet oleh HTML.
Berikut ini contoh penggunaan <ul> (un-ordered list) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element UL (Un-ordered List)</title>
</head>
<body>
<h2>Belajar Menggunakan HTML Element UL</h2>
<p>Nama jenis buah :</p>
<ul>
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</body>
</html>
Jika dijalankan, maka akan menghasilkan tampilan:
Menggunakan Atribut "TYPE"
Secara default, HTML element <ul> (un-ordered list) ditampilkan dalam bentuk bulatan kecil dengan type "disc". Nilai "disc" ini merupakan bulet berupa titik hitam bulat yang melingkar di depan setiap daftar. Atribut type pada HTML element <ul> memiliki 3 buah nilai yaitu "disc" (bulatan solid), "square" (kotak), dan "circle" (lingkaran berlubang). Untuk melihat nilai tampilan bentuk butir-butir bulet lainnya, berikut ini kode berbagai type daftar <ul> (un-ordered list) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element UL (Un-ordered List)</title>
</head>
<body>
<h2>Belajar Menggunakan HTML Element UL</h2>
<p>HTML Element UL (Un-ordered List) dengan berbagai type tampilan</p>
<ul type="disc">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<ul type="square">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<ul type="circle">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</body>
</html>
Jika dijalankan, maka akan menghasilkan halaman seperti dibawah ini :
Browser Pendukung :
Global Attributes :
Tag <ul> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi
Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <ul> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti
scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <ul> pada HTML:
1
2
3
4
5
6
7
8
9ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}