Hướng dẫn tạo menu xổ bằng CSS

Nay mình xin hướng dẫn các bạn cách code một menu xổ bằng CSS và HTML, mà các bạn thường thấy ở những Website khác. Các bạn khi thực hiện được menu xổ này rồi các bạn có thể tuy biến để chỉnh sửa menu theo ý của các bạn!

Đầu tiên bạn chuẩn bị một thư mục:/demo-basic/menu-xo/index.html để chứa file cần viết

Các bạn cần chú ý các thuộc tính như: position:relative,position:absolute nhé

Code css

<style>
		*{margin:0px;padding:0px;}
		nav.box_menu_xo{
			width: 900px;
			margin: 100px auto;
		}
		ul.menu li{
			list-style: none;
			text-align: center;
			float: left;
			width: 200px;
			position: relative;
			background: rgba(0,145,234,1);
			padding: 10px 0;
			box-sizing: border-box;
			border-right: 1px solid rgba(225,225,225,0.5);
		}
		ul.menu li:last-child{
			border: none;
		}
		ul.menu li a{
			text-decoration: none;
			color: #fff;
			
		}
		ul.menu li:hover{
			background: rgba(0,0,0,0.8);
		}
		
		/*hover hiện submenu ra*/
		ul.menu li:hover ul.submenu{
			display: block;
		}

		/*submenu*/
		ul.menu li ul.submenu{
			position: absolute;
			top: 100%;
			display: none; /*ẩn submenu đi*/
		}
		ul.menu li ul.submenu li{
			border-bottom: 1px solid rgba(225,225,225,0.5);
			width: 100%;
		}
		ul.menu li ul.submenu li a{
			font-size: 13px;
		}
		ul.menu li ul.submenu li:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
	</style>

Code html

<nav class="box_menu_xo">
		<ul class="menu">
			<li><a href="#">HOME</a></li>
			<li><a href="#">DOWNLOAD</a>
				<ul class="submenu">
					<li><a href="#">LARAVEL FRAMEWORK 5</a>
					<li><a href="#">CODEIGNITER 3.x</a>
					<li><a href="#">ANGULAR V2</a>
				</ul>
			</li>
			<li><a href="#">DOWCUMENT</a>
				<ul class="submenu">
					<li><a href="#">ANGULARJS</a>
					<li><a href="#">NODEJS</a>
					<li><a href="#">ANDROIDD</a>
				</ul>
			</li>
			<li><a href="#">FACEBOOK</a></li>
		</ul>
	</nav>

Các bạn copy các source bên trên và dán vào file index.html của bạn nhé, nhơ để dúng vị trí nhé!

Các bạn có thể xem video của mình trên website https://hoanguyenit.com/

Bài Viết Liên Quan

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký