簡單實現二級選單

阿新 • • 發佈：2018-12-05

這裡寫自定義目錄標題

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
/* *{	
	margin:0 ;
	padding: 0;
	border:0;
	list-style-type: none;
	text-decoration: none;
	color:#000000;
}
ul{ 
	font-size:0;
	width:520px;
	margin:0 auto;
}
li{ background:#87CEEA;
	width:100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	position: relative;
}
nav>ul>li{
display: inline-block	
}
nav>ul>li:hover{
	background:#04BCFD ;
}
li:hover a{
	color:#FFFFFF;
}
nav>ul>li:hover .ul-1{
	display: block;
}
.ul-1,.ul-2{
	position: absolute;
}
.ul-1,.ul-2{
display:none;
}
.ul-1>li{
	background: pink;
}
.ul-1>li>a{
	color:#000000;
}
.ul-1>li>a:hover .ul-1>li>a{
	color: #FFFFFF;
}
.ul-1>li:hover .ul-2{
	display:block;
}
.ul-2{
	left:100px;
	top:0px;
	
	width: 100px;
}
.ul-2>li{
	background: green;
}
.ul-2>li>a{
	color:#000000;
} */ 

*{
	margin:0;
	padding:0;
	}
nav{
	width:520px;
	margin:0 auto;
	height: 50px;
	background: #87CEEA;
	position: relative;
}
a{
	display:block;
	width:100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	color:#000000;
}
li{
	list-style-type:none ;
	width:100px;
	height:50px;
	position 
: relative;
}
nav>ul>li>a:hover{
	background: #03BCFF;
	color:#ffffff;
}
nav>ul>li{
	display: inline-block;
	position: relative;
}
nav>ul>li:nth-of-type(2)>a:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top:5px solid #000000;
	border-left: 5px solid rgba(250,250,250,0) 
;
	border-right:5px solid rgba(250,250,250,0);
	position: absolute;
	top:25px;
	left:80px;
}
nav>ul>li:nth-of-type(2):hover>a:after{
	border-top:none;
	border-bottom:5px solid #FFFFFF;
	
}
.ul-1,.ul-2{
	display: none;
	position: absolute;
}
nav>ul>li:hover .ul-1{
	display: block;
}
.ul-1{
	background: #FFBECA;
}
.ul-1>li>a:hover{
	color:#FFFFFF;
	background:#FD0002 ;
}
.ul-1>li:hover .ul-2{
	display: block;
}
.ul-2{
	left:100px;
	background: #008001;
	top:0px;
}
.ul-2>li:hover a{
	background: #0102F3;
	color:#FFFFFF;
}
.ul-1>li:nth-of-type(2)>a:after{
	content:"";
	display: block;
	width:0;
	height: 0;
	border-left:5px solid #000000;
	border-top:5px solid rgba(250,250,250,0);
	border-bottom:5px solid rgba(250,250,250,0);
	position: absolute;
	top:20px;
	left:90px;
}
.ul-1>li:nth-of-type(2):hover>a:after{
	border-left:5px solid #FFFFFF;
}
	</style>
	</head>
	<body>
		<nav>
			<ul >
				<li><a href="">導航欄</a></li>
				<li><a href="">導航欄</a>
				<ul class="ul-1">
					<li><a href="">一級選單</a></li>
					<li><a href="">一級選單</a>
					<ul class="ul-2">
						<li><a href="">二級選單</a></li>
						<li><a href="">二級選單</a></li>
						<li><a href="">二級選單</a></li>
						<li><a href="">二級選單</a></li>
						<li><a href="">二級選單</a></li>
					</ul></li>
					<li><a href="">一級選單</a></li>
					<li><a href="">一級選單</a></li>
					<li><a href="">一級選單</a></li>
				</ul></li>
				<li><a href="">導航欄</a></li>
				<li><a href="">導航欄</a></li>
				<li><a href="">導航欄</a></li>
			</ul>
		</nav>
	</body>
</html>

效果圖
在這裡插入圖片描述 ```
製作這個導航最主要的也就是使用絕對定位使下級選單脫離文件流使其可以不打亂上一級選單佈局

簡單實現二級選單

這裡寫自定義目錄標題 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style&

jQuery UI的簡單使用，輕鬆實現二級選單

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實驗10-3 jQuery UI</title> <link rel="stylesh

vue實現二級選單的顯示或隱藏

場景：二級選單用html寫死的，而不是以通過data和v-for動態生成的今天在實現的過程中，出現了問題。實現思路如下： data中設定menuIsShow為一個數組，陣列的元素為boolean值，表示一級選單是否顯示或隱藏。在html中對應的二級選單元素上

ExpandableListView簡單實現二級列表

xml建立一個 ExpandableListView <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

css中用hover實現二級選單

css中用hover實現二級選單在我們日常生活中，通常會看到下拉選單會有一些二級選單，下面就為大家講解一下如何生成二級選單。第一步首先進行一個頁面的主要佈局，我這裡主要用的是ul+li進行巢狀佈局，內容如下：第二部就要給它進行一個格式的編寫，讓它實現效果：以上就是一個簡單的

Android 使用BRVAH 實現二級選單。類似QQ分組

首先配置什麼的。點選這裡程式碼：兩個類，一個是一級的類，一個是二級的類直接貼上 package com.mogujie.tt.ui.model; import com.chad.library.adapter.base.entity.Abs

vue 實現購物清單實現二級選單

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>實現二級選單Vue</title> <script src="vue.min.js">

js+css+ul實現二級選單

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyLeftNav.ascx.cs" Inherits="MIT.UserContral.MyLeftNav" %> <style ty

CSS3實現二級選單

今天看了一個demo，原demo雖說是CSS3實現，但其中也使用了js，再一個裡面的程式碼有些地方，我覺得還可以優化，所以自己就嘗試著用css3實現一下我想說: 不論寫一個多麼炫酷的demo，z-index的值都最好不要超過2 下面是原始碼： html部分 <

Web前端開發實戰6：CSS實現導航選單結合二級下拉式選單的簡單變換

前面幾篇博文都在講導航選單和二級下拉式選單，其實有很多方法都可以實現的，具體的情況還要視情況而定。在後面學習到jQuery框架之後，會有更豐富的動畫效果，由於在學習Ajax和jQuery的初步階段，對於很多的複雜的導航菜單和二級下拉式選單沒法做，但是學習了

jquery $.post() 向php傳值實現簡單的二級聯動

chang var box jquer lec 簡單 cnblogs encode can 1 其中selectid是一個下拉菜單的id 2 3 $().ready(function () { 4 $("#selectid").change(functi

業務功能“二級分銷”簡單實現

結果金字塔 ++ 什麽是 ava int src 成員們的 1.什麽是二級分銷？二級分銷其實是一種讓用戶分裂通過邀請的形式來獲得更多的用戶。如有ABC三個人，A邀請B做一件事情，B邀請C做一件事情。假定通過直接邀請可獲得10%利潤，通過間接邀請可獲得5%的利潤，設這件

CSS實現自定義導航欄帶二級選單

程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

vue許可權控制選單顯示的簡單實現

為了對於不同角色顯示不同的選單思路1: 本地放一份完整的選單資料,通過後臺返回角色的選單列表.兩者對比,篩選需要顯示的選單資料繫結, 這裡有個問題就是路由vue例項初始化就生成了,載入的全部,人為輸入地址是可以訪問到角色許可權以外的資料, 所以還要加路由構子router.befor

簡單實現設定分級使用者可見選單使用

#region 獲取buttonitem的名稱 public ArrayList mainFormCon() { ArrayList nameList = new ArrayList(); fo

Django web開發中的二級聯動select 列表的簡單實現方法

因給單位行行政部門開發一個《文具管理系統》需要在管理端的入庫和員工的領用端實現按文具分類查找出相應的文具，在頁面上放了二個select, 第一個select 列出文具分類，第二個select根據第一個select的分類列出相應的文具。一， models.py class stat_t

select選單實現二級聯動

<tr> <th>執行人<b>*</b></th> <td> <select name="

購物車簡單實現（二級列表ExpandableListView）

MVP請求資料自行解決 MainActivity package com.zjh.administrat.shopping_cartdemo.view; import android.support.v7.app.AppCompatActivity; import android.

動感實現伸縮顯示二級選單

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動感實現伸縮顯示二級選單</title> <link

3種方法實現導航選單欄中的二級下拉選單

我們在淘寶、搜狐等大型網站上都可以看到使用的一些二級下拉選單，比如下面這張圖片。我們有至少三種方式來實現，附上程式碼供大家參考。 1.僅使用html和css <!DOCTYPE html><html lang="en"><head><meta

簡單實現二級選單

這裡寫自定義目錄標題

相關推薦