Hỏi về đoạn code menu dropdown by HTML, CSS

Sắp tới giao thừa rồi, các bác nào thông cmn cảm giúp e vs ạ
tình hình là giao thừa vẫn đang code

Tại sao thẻ li chưa set width & height nhưng khi set padding cho thẻ a thì width & height của thẻ li lại tự động dãn ra với kích thước đúng bằng kích thước của thẻ a ạ ? (mặc dùng chưa set width: auto; và height: auto; cho thẻ li ?)

Đơn giản vì <li> chứa <a> . Khi li chưa đặt width và height thì nó sẽ nhận kích thước của phần tử con ở đây là <a>.

Tại sao thẻ ul.sub-menu nằm trong thẻ li.dropdown nhưng khi em inspect element để check thử, thẻ ul.sub-menu lại nằm ngoài lẻ li.dropdown ?

Bạn chắc chứ?

Pasted image1360x428 68.8 KB

Tại sao content width của các thẻ li con (education, open source, license, …) khác nhau; padding giống nhau (padding: 20px 50px;) nhưng real width của nó lại bằng nhau ạ ? (đáng lẽ chúng phải khác nhau do content width của các thẻ li con khác nhau chứ ? hay do ảnh hưởng của thuộc tính box-sizing nhỉ ?)

Nó sẽ lấy thẻ <li> có cái content lớn nhất + padding left + padding right để làm width chung. (Cái này mình chưa test lại, nhưng mình nhớ vậy, lúc trước củng thắc mắc làm thử rồi)

Và tại sao width của ul.sub-menu ở 2 thẻ li.dropdown lại khác nhau ?

Như câu trênh, do context width của nó khác với content width của li bên cạnh.
Chúc mừng năm mới :))

Tại sao thẻ li chưa set width & height nhưng khi set padding cho thẻ a thì width & height của thẻ li lại tự động dãn ra với kích thước đúng bằng kích thước của thẻ a ạ ? (mặc dùng chưa set width: auto; và height: auto; cho thẻ li ?)

mặc định width height có gía trị là auto rồi bạn.

Tại sao thẻ ul.sub-menu nằm trong thẻ li.dropdown nhưng khi em inspect element để check thử, thẻ ul.sub-menu lại nằm ngoài lẻ li.dropdown ?

Nếu thẻ ul.sub-menu nằm ngoài thẻ li.dropdown thì sao position: absolute; lại có tác dụng được ạ ?

vị trí của nó nằm bên ngoài thôi, do absolute, còn thực chất nó vẫn thuộc thẻ li.

Tại sao content width của các thẻ li con (education, open source, license, …) khác nhau; padding giống nhau (padding: 20px 50px;) nhưng real width của nó lại bằng nhau ạ ? (đáng lẽ chúng phải khác nhau do content width của các thẻ li con khác nhau chứ ? hay do ảnh hưởng của thuộc tính box-sizing nhỉ ?)

cái đó là nền của ul, nó giãn ra theo các phần tử con nên nó sẽ có độ dài bằng thằng con dài nhất. còn các li độ dài thế nào mình không thấy bạn di chuột qua để xem mỗi li dài khác nhau không.

Đơn giản vì <li> chứa <a> . Khi li chưa đặt width và height thì nó sẽ nhận kích thước của phần tử con ở đây là <a>.

mặc định width height có gía trị là auto rồi bạn.

Vậy có nghĩa là khi code CSS, việc để width: auto; hay height: auto; là không cần thiết ạ ?

Bạn chắc chứ?

Không, ý em là khi mình rê vào dòng <li class="dropdown"> thì cái ô Services nó màu xanh, còn khi mình rê chuột vào dòng <ul class="sub-menu"> thì nguyên cái khung gồm Education, Open Source với Software Solution nó xanh lên => cái thẻ ul nó nằm ngoài thẻ li đó !

Nó sẽ lấy thẻ <li> có cái content lớn nhất + padding left + padding right để làm width chung. (Cái này mình chưa test lại, nhưng mình nhớ vậy, lúc trước củng thắc mắc làm thử rồi)

Ồ, em học nhiều bài CSS rồi mà chưa biết tới cái này Tiện thể, anh có thể cho e vài cái link nói về vấn đề này không ?[quote=“Quan_Tran, post:3, topic:40935”]
Chúc mừng năm mới :))
[/quote]

Nghe ông Trần Đại Quang phát biểu xong là đi ngủ khò khò rồi

vị trí của nó nằm bên ngoài thôi, do absolute, còn thực chất nó vẫn thuộc thẻ li.

à, thế có nghĩa là nếu không có position: absolute; thì width của thẻ li.dropdown nó sẽ bao luôn thẻ ul.sub-menu đúng không ạ ?

cái đó là nền của ul, nó giãn ra theo các phần tử con nên nó sẽ có độ dài bằng thằng con dài nhất. còn các li độ dài thế nào mình không thấy bạn di chuột qua để xem mỗi li dài khác nhau không.

Size của thẻ li có content License & Copyright là 170 x 58.
Size của thẻ li có content Education, Open Source & Software Solution là 222 x 58.
=> Cũng giống nhau mà anh nhỉ ?

Pasted image1361x430 67 KB

HAPPY NEW YEAR !

Vậy có nghĩa là khi code CSS, việc để width: auto; hay height: auto; là không cần thiết ạ ?

Cái này còn tùy, phụ thuộc vào display (inline, block) và position.

Không, ý em là khi mình rê vào dòng <li class=“dropdown”> thì cái ô Services nó màu xanh, còn khi mình rê chuột vào dòng <ul class=“sub-menu”> thì nguyên cái khung gồm Education, Open Source với Software Solution nó xanh lên => cái thẻ ul nó nằm ngoài thẻ li đó !

Thực sự cái này mình đang không hiểu bạn nói gì :), vì nếu thằng <li class="dropdown"> không phải là cha của thằng <ul class="sub-menu"> (chứa), thì khi chúng ta hover vô li.dropdown nó sẽ không cho display:block ở ul.sub-menu. Và ngược lại ul.sub-menu mãi mãi là display:none
Mâu chốt của dropdown này là thằng li.dropdown chứa thằng ul.sub-menu và khi ta hover vào thằng li.dropdown thì thằng ul.sub-menu nó sẽ chuyển từ display:none -> display:block.

Cái này còn tùy, phụ thuộc vào display (inline, block) và position.

Anh có thể nói rõ vấn đề này hơn nữa được không ?

Thực sự cái này mình đang không hiểu bạn nói gì :), vì nếu thằng <li class=“dropdown”> không phải là cha của thằng <ul class=“sub-menu”> (chứa), thì khi chúng ta hover vô li.dropdown nó sẽ không cho display:block ở ul.sub-menu. Và ngược lại ul.sub-menu mãi mãi là display:noneMâu chốt của dropdown này là thằng li.dropdown chứa thằng ul.sub-menu và khi ta hover vào thằng li.dropdown thì thằng ul.sub-menu nó sẽ chuyển từ display:none -> display:block.

Em hiểu ý anh rồi, nhưng anh vẫn chưa hiểu ý em =)))
Để em đi qua nhà bà con ăn tết xíu rồi về vẽ hình minh họa cho anh cho :))

Ồ, em học nhiều bài CSS rồi mà chưa biết tới cái này Tiện thể, anh có thể cho e vài cái link nói về vấn đề này không ?

Coi display: list-item

Anh có thể nói rõ vấn đề này hơn nữa được không ?

Lênh css-tricks đọc tốt nhất
https://css-tricks.com/almanac/properties/d/display/
Đọc thêm bài position nữa:
https://css-tricks.com/almanac/properties/p/position/

Coi display: list-item

Là sao ạ ? Em search rồi mà có thấy gì nói về vấn đề ấy đâu ?

http://hocwebchuan.com/reference/cssSection/example/ex_display.php
.

Em đã xem qua link đó nhưng vẫn không hiểu gì hết anh êiiii :v
cái chỗ display: list-tem nó có nói gì về vấn đề kia âu ?

Vậy có nghĩa là khi code CSS, việc để width: auto; hay height: auto; là không cần thiết ạ ?

còn tuỳ, có thể phải đặt nếu muốn ghi đè lại thuộc tính này đã được set ở css khác.

à, thế có nghĩa là nếu không có position: absolute; thì width của thẻ li.dropdown nó sẽ bao luôn thẻ ul.sub-menu đúng không ạ ?

có thể nói thế. bạn có thể thử.

Size của thẻ li có content License & Copyright là 170 x 58.Size của thẻ li có content Education, Open Source & Software Solution là 222 x 58.=> Cũng giống nhau mà anh nhỉ ?

nếu không bị ghi đè thì mặc định li là thẻ có thuộc tính display list-item, thuộc tính này cũng giống display block là chiếm 100% width của parent. vậy nên các li sẽ có width bằng nhau và bằng thằng li dài nhất trong cùng ul.

Chỉ thế này là xong thôi mà

See the Pen ygvQrJ by Hung Pham (@machao112) on CodePen.

Theo mình đoạn code này cực kỳ đơn giản, dễ hiểu
Pế/ết: Nhúng CSS theo kiểu External Style

• File HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Menu ngang Dropdown</title>
		<meta charset="utf-8" />
		<meta name="author" content="Thanh" />
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="menu">
		  <ul>
		    <li><a href="#">Home</a></li>
		    <li><a href="#">About</a></li>
		    <li>
		      <a href="#">Services</a>
		      <ul class="sub-menu">
		        <li><a href="#">Education</a></li>
		        <li><a href="#">Open Source</a></li>
		        <li><a href="#">Software Solution</a></li>
		      </ul>
		    </li>
		    <li><a href="#">FAQ</a></li>
		    <li><a href="#">Contact</a></li>
		  </ul>
		</div>
	</body>
</html>

• File CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

#menu ul {
  background-color: #000;
  text-align: center;
  list-style-type: none;
}

#menu ul li {
  display: inline-table;
  width: 150px;
  height: 60px;
  line-height: 60px;
  position: relative;
}

#menu ul li a {
  display: block;
  text-decoration: none;
  color: #f1f1f1;
}

#menu ul li:hover {
  background: #151515;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

#menu ul li > .sub-menu {
  display: none;
}

#menu ul li:hover .sub-menu {
  display: block;
  position: absolute;
}