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

Messsage

Nếu bạn thích chia sẻ của tôi, đừng quên nhấn nút !ĐĂNG KÝ