新浪導航條js下拉菜單_鼠標移入移出

標簽： js html

新浪導航條js下拉菜單_鼠標移入移出

效果圖：

在這里插入圖片描述
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
		  	margin: 0;
			  padding: 0;
		}
		li {
		    list-style: none;		
			}
		a {
				text-decoration: none;
		}
		ul,li ,span{
				margin: 0;
				padding: 0;
		}
		.w {
				width: 1000px;
				margin: 0 auto;
		}
	#head {
			width: 100%;
			height: 39px;
			line-height: 39px;
			border-top: 3px solid #FF8500;
			background-color: #FCFCFC;
		}
		.head_D {
			margin-top: -2px;
		}
	  .head_z {
			float:left;
		}
		.head_z  li {
			float:left;
		}
		.head_z  li a {
			display: inline-block;
			font-size: 12px;
			padding: 0 12px;
			color: #4c4c4c;
		}
		.head_z  li a>span {
			display: inline-block;
			width: 8px;
			margin-left: 5px;
			font-size: 12px;
		}
		.head_y {
			float: left;
			margin-left: 370px;
		}
		.head_y li {
			float: left;
		}
		.head_y  li a {
			display: inline-block;
			font-size: 12px;
			padding: 0 18px;
			color: #4c4c4c;
		}
		.head_z  li a:hover,
		.head_y  li a:hover {
			background-color: #edeef0;
			color: #FF8500;
		}
		.head_y  li a>span {
			display: inline-block;
			width: 8px;
			margin-left: 5px;
			font-size: 12px;	
		}
		.li_ts {
			position: relative;
		}
		.head_y li>ul {
			position: absolute;
			display: none;
		}
		.head_y li>ul li {
	  	width: 100%;
			border: 1px solid #FF8500;
			border-top: 0;
		}
		.head_y li>ul a {
			display: block;
			padding-left: 12px;
			line-height: 31px;
		}
		.head_y li>ul a:hover {
			background-color:	#FFF5DA;
		}
	</style>
</head>
<body>
	  <div id="head">
			 <div class="w head_D">
					<!-- 左側導航 -->
					<ul class="head_z">
						<li><a href="#">設為首頁</a></li>
						<li><a href="#">手機新浪網</a></li>
						<li><a href="#">移動客戶端<span>></span></a></li>
					</ul>
					<!-- 右側導航 -->
					<ul class="head_y">
						<li><a href="#">登錄</a></li>
						<li class="li_ts">
							<a href="#">微博<span>></span></a>
							<!-- 下拉菜單 -->
							<ul class="xia_la">			
								<li><a href="#">私信</a></li>
								<li><a href="#">評論</a></li>
								<li><a href="#">@我</a></li>					
					   </ul>
						</li>
						<li><a href="#">博客<span>></span></a></li>
						<li><a href="#">郵箱<span>></span></a></li>
						<li><a href="#">網站導航</a></li>
					</ul>
			 </div>
		</div>
</body>
	<script>
		var li = document.querySelector('.li_ts');
		var caid = document.querySelector('.xia_la');
		li.onmouseover = function () {
		  if(	caid.style.display = 'none'){
				caid.style.display = 'block';
			}
		}
		li.onmouseout = function () {
		  if(	caid.style.display = 'block'){
				caid.style.display = 'none';
			}
		}
	</script>
</html>

本文鏈接：https://blog.csdn.net/weixin_46323591/article/details/106222422

智能推薦

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...