Tình hình là e đang mày mò tới phần menu dropdown trong CSS nhưng thấy nó phức tạp sao ý, e thử tự code thì nó rối tùm lum, thế là lên mạng search thì có 1 đoạn code như sau:
<!DOCTYPE html>
<html>
<head>
<title>Menu Dropdowns</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::selection {
background-color: #A39B9B;
}
::-moz-selection {
background-color: #A39B9B;
}
.menu {
width: 100%;
height: auto;
position: fixed;
text-align: center;
font-weight: bold;
top: 0;
}
.menu .list {
list-style-type: none;
word-spacing: -4px;
background-color: #000000;
}
.menu .list > li {
word-spacing: 0;
display: inline-block;
}
.menu .list li a {
display: block;
padding: 20px 50px;
text-decoration: none;
color: #FFFFFF;
}
.menu .list li a:hover {
background-color: #031C24;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu .list .dropdown .sub-menu {
list-style-type: none;
position: absolute;
background-color: #000000;
z-index: 1;
display: none;
-webkit-box-shadow: 7px 7px 15px grey;
-moz-box-shadow: 7px 7px 15px grey;
box-shadow: 7px 7px 15px grey;
}
.menu .list .dropdown:hover .sub-menu {
display: block;
}
.menu .list .dropdown:hover > a {
background-color: #031C24;
}
.menu .list .dropdown .sub-menu li a:hover {
background-color: #CC1B1B;
}
p {
margin: 70px 50px 10px 50px;
}
</style>
</head>
<body>
<div class="menu">
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<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 class="dropdown">
<a href="#">FAQ</a>
<ul class="sub-menu">
<li><a href="#">License</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat tempus lectus venenatis pharetra. In nec velit nisl. Ut elementum vel nisi quis commodo. Praesent nec dolor nec dui sollicitudin aliquet. Aliquam velit urna, aliquam non hendrerit nec, fermentum vitae enim. Nulla eget erat sed augue maximus feugiat. In egestas lorem non nisl volutpat, sed commodo lorem luctus. Integer consectetur nibh eu urna vestibulum consectetur. Maecenas egestas at orci a auctor. Nullam imperdiet faucibus est, vitae commodo justo dapibus sed.Aliquam erat volutpat. Proin ullamcorper placerat nulla venenatis consequat. In maximus turpis elit, vel varius quam egestas in. Vivamus vitae nibh blandit, porttitor diam et, ultrices dui. Nam luctus dolor nec ante auctor scelerisque. Cras rhoncus elit eget egestas dignissim. Mauris ut ultrices massa. Phasellus rhoncus ante sed justo egestas, eget cursus dui porttitor. Sed condimentum facilisis fringilla.Sed a placerat nisl. Pellentesque id nibh felis. Morbi vel congue enim, eget lobortis ligula. Cras leo eros, pellentesque at molestie vitae, pharetra id felis. Ut non leo euismod, maximus nulla vel, mattis sapien. Suspendisse neque libero, maximus non rhoncus tempus, euismod non massa. Fusce maximus varius scelerisque. Praesent consectetur ipsum velit, eu congue ipsum congue in. Pellentesque molestie nibh eget mollis lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer rhoncus tortor at cursus pellentesque. Fusce convallis, massa eu ullamcorper dapibus, est massa sagittis ex, ac consectetur ipsum odio eget odio. Sed magna est, rutrum quis pharetra in, cursus nec neque.Nunc faucibus nec dui at iaculis. Morbi venenatis sapien sit amet eros rhoncus, sed ullamcorper sem pulvinar. Suspendisse nec bibendum quam. Nunc scelerisque tempor justo eu suscipit. Praesent suscipit porttitor rutrum. Nullam efficitur quam ut ante viverra, at volutpat eros fermentum. Quisque id erat augue.Aliquam ut leo non elit consequat finibus. Ut hendrerit arcu erat, varius fermentum nulla iaculis ac. Mauris iaculis urna vel ex maximus, id lobortis libero ornare. Vivamus convallis nulla nec cursus aliquam. Proin nunc metus, fermentum eu ullamcorper ut, vehicula eu libero. Sed vitae volutpat purus. Aenean dictum ut orci eget sodales. Proin posuere, mi id luctus sagittis, nibh turpis mollis lectus, vel tristique quam diam in erat. Sed dapibus luctus ullamcorper. Nam auctor augue vitae metus maximus tristique. Curabitur at auctor nisi.Vivamus rutrum mattis magna eget gravida. Ut at dui facilisis, eleifend turpis in, sollicitudin nulla. Fusce viverra tortor a tellus lacinia, sit amet faucibus eros pharetra. Vestibulum eget tincidunt eros, id auctor mi. Donec dictum justo vitae magna bibendum, in commodo leo semper. Aliquam suscipit rutrum leo ut volutpat. Nam tellus eros, pretium quis dignissim nec, varius sed magna.In porta mauris id tincidunt posuere. Aliquam lacus ipsum, vehicula a lectus a, facilisis fringilla nisi. Nulla tristique at odio quis elementum. Vivamus pretium maximus ante. Cras vitae varius sem. Donec tempor nibh quis justo blandit venenatis sit amet sit amet nisi. Integer molestie quam quis nibh blandit placerat. Aliquam eget libero porttitor, auctor metus vitae, ullamcorper nibh. Sed urna nunc, scelerisque in sodales sed, ultricies nec eros. Nam lobortis posuere nisi vel maximus. Nulla a dolor tempus, finibus tortor at, fringilla metus.Mauris massa mauris, feugiat eu ligula ut, posuere laoreet arcu. Ut feugiat imperdiet odio, non eleifend sem sollicitudin quis. Fusce non dignissim velit. Morbi faucibus elementum arcu, malesuada sollicitudin tortor. Donec sit amet nulla consequat, gravida mi quis, varius urna. Aenean feugiat lobortis turpis. Fusce nisi nulla, molestie et tortor quis, cursus aliquam libero. Quisque a ullamcorper mauris. Sed a lacinia tortor, non tempor nulla. Ut ut orci dui. Donec maximus vestibulum elit ac ultrices.Aenean at nisl lorem. Integer fringilla velit eget mattis hendrerit. Aenean dui risus, imperdiet imperdiet nulla sit amet, condimentum pretium leo. In velit nisl, pellentesque vel dui eget, tempor fermentum mauris. Duis feugiat ante sit amet lorem cursus malesuada. Proin vitae felis eu dolor semper congue. Nunc pellentesque velit tellus, vitae molestie justo placerat et. Cras sagittis magna at turpis consequat consectetur. In iaculis ipsum elit, tempus laoreet orci pellentesque accumsan.Morbi venenatis posuere dui, et ornare libero imperdiet eget. Duis efficitur eget ante nec gravida. Sed vestibulum pellentesque odio, ac lacinia libero. Quisque pretium velit a metus tempus, ut scelerisque lectus rutrum. Aenean dapibus, lacus eu semper vehicula, dolor est convallis leo, in auctor sapien eros id elit. Duis ipsum quam, tempor sit amet lectus non, vestibulum rutrum ex. Etiam varius feugiat quam, eu convallis tortor ultricies id. Aenean congue eros vitae ornare facilisis. Donec interdum in justo in tincidunt. Donec viverra nulla eu enim tempor cursus. Maecenas dapibus velit augue, ac eleifend lacus convallis sit amet. Donec consequat nulla sit amet ligula dapibus scelerisque. In fringilla fermentum diam, ac vehicula tortor luctus eget. Praesent dictum ultricies arcu eu scelerisque. Nulla facilisi.
</p>
</body>
</html>
Em xem qua thì cũng không khó hiểu cho lắm nhưng có vài chỗ em chưa hiểu sau:
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 ạ ?
(e tạm thời sửa display: none; thành display: block; cho dễ quan sát)
Và tại sao width của ul.sub-menu ở 2 thẻ li.dropdown lại khác nhau ?
(Mà cái thẻ li con có nội dung Software solution không biết padding-left và padding-right của nó có đúng 50px không nữa, nhìn thấy khác so với 2 cái thẻ li con trên)
Đó là những câu hỏi của e, mong các pro giải đáp giúp!
Em cảm ơn nhiều 
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”]
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?