html多级竖行下拉菜单,CSS水平下拉菜单（垂直多级菜单）

最新推荐文章于 2023-06-29 15:32:53 发布
最新推荐文章于 2023-06-29 15:32:53 发布
阅读量481 收藏
点赞数
文章标签： html多级竖行下拉菜单
CSS Menu - Horizontal

body {

margin: 0;

padding: 30px;

background: #FFF;

color: #666;

}

h1 {

font: bold 16px Arial, Helvetica, sans-serif;

}

p {

font: 11px Arial, Helvetica, sans-serif;

}

a {

color: #900;

text-decoration: none;

}

a:hover {

background: #900;

color: #FFF;

}

/*CSS Code for Menu Begin:*/

/* Root = Horizontal, Secondary = Vertical */

ul#navmenu {

margin: 0;

border: 0 none;

padding: 0;

width: 500px; /*For KHTML*/

list-style: none;

height: 24px;

}

ul#navmenu li {

margin: 0;

border: 0 none;

padding: 0;

float: left; /*For Gecko*/

display: inline;

list-style: none;

position: relative;

height: 24px;

}

ul#navmenu ul {

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

list-style: none;

display: none;

position: absolute;

top: 24px;

left: 0;

}

ul#navmenu ul li {

float: none; /*For Gecko*/

display: block !important;

display: inline; /*For IE*/

}

/* Root Menu */

ul#navmenu a {

border: 1px solid #FFF;

border-right-color: #CCC;

border-bottom-color: #CCC;

padding: 0 6px;

float: none !important; /*For Opera*/

float: left; /*For IE*/

display: block;

background: #EEE;

color: #666;

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

height: auto !important;

height: 1%; /*For IE*/

}

/* Root Menu Hover Persistence */

ul#navmenu a:hover,

ul#navmenu li:hover a,

ul#navmenu li.iehover a {

background: #CCC;

color: #FFF;

}

/* 2nd Menu */

ul#navmenu li:hover li a,

ul#navmenu li.iehover li a {

float: none;

background: #EEE;

color: #666;

}

/* 2nd Menu Hover Persistence */

ul#navmenu li:hover li a:hover,

ul#navmenu li:hover li:hover a,

ul#navmenu li.iehover li a:hover,

ul#navmenu li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 3rd Menu */

ul#navmenu li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 3rd Menu Hover Persistence */

ul#navmenu li:hover li:hover li a:hover,

ul#navmenu li:hover li:hover li:hover a,

ul#navmenu li.iehover li.iehover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 4th Menu */

ul#navmenu li:hover li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 4th Menu Hover */

ul#navmenu li:hover li:hover li:hover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover li a:hover {

background: #CCC;

color: #FFF;

}

ul#navmenu ul ul,

ul#navmenu ul ul ul {

display: none;

position: absolute;

top: 0;

left: 160px;

}

/* Do Not Move - Must Come Before display:block for Gecko */

ul#navmenu li:hover ul ul,

ul#navmenu li:hover ul ul ul,

ul#navmenu li.iehover ul ul,

ul#navmenu li.iehover ul ul ul {

display: none;

}

ul#navmenu li:hover ul,

ul#navmenu ul li:hover ul,

ul#navmenu ul ul li:hover ul,

ul#navmenu li.iehover ul,

ul#navmenu ul li.iehover ul,

ul#navmenu ul ul li.iehover ul {

display: block;

}

navHover = function() {

var lis = document.getElementById("navmenu").getElementsByTagName("LI");

for (var i=0; i

lis[i].οnmοuseοver=function() {

this.className+=" iehover";

}

lis[i].οnmοuseοut=function() {

this.className=this.className.replace(new RegExp(" iehover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", navHover);

CSS Menu - Horizontal

懂得越多越要学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
weixin_29535577的博客
05-30 2567
一、简单的导航栏首先通过一个入门级的导航栏来练习一下1、先布局好html的结构2、通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理，在不同过js的情况下，就可以轻松实现二级菜单栏，三级菜单也可以在此基础上添加。至于一些细节的处理，就要靠大家自己去调整了。在例子一中，其实还有个坑，就是在二级菜单展示之后，会影响下方容器的布局。从上图中可以很清楚的看到，子菜单在隐藏和显示的...
html好看css列表样式_CSS样式HTML列表样式
cunfen6312的博客
07-28 5942
html好看css列表样式 CSS样式HTML列表样式 (CSS Styling HTML Lists) We often see webpages with navigation menus, providing links to other pages in a dropdown fashion, or as a horizontal menu (See the Studytonight W...
html实现好看的多种风格导航菜单(附源码)
热门推荐
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
几款好看的css表格
HLLLLLL_的博客
03-30 1万+
表格一： 代码： html代码段： 是用vs写的 表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 <h1>待处理订单</h1> <table id="all-requst"> <thead> <tr> ...
【博主推荐】html好看的列表滚动效果（附源码）
xcLeigh
05-20 8370
【博主推荐】html好看的列表滚动效果（附源码） 1.实现列表滚动，上下无缝衔接； 2.实现鼠标悬浮停止滚动；
多级CSS3下拉菜单导航.zip
07-11
实现效果： 多级CSS3下拉菜单导航，适用于企业网站或者商城网站，如果网站内容很丰富，那么我们的导航就需要多级来展示了，php中文网推荐下载！
纯CSS实现的多级下拉横向导航菜单代码
01-23
纯CSS实现的多级下拉横向导航菜单代码
css3实现的多级渐变下拉菜单导航效果代码
09-24
主要为大家介绍了css3实现的多级渐变下拉菜单导航效果代码,通过纯css3技术实现圆角图形及渐变按钮的模拟效果,具有一定参考借鉴价值,需要的朋友可以参考下
纯CSS实现鼠标经过多级下拉透明导航菜单代码
01-23
纯CSS实现鼠标经过多级下拉透明导航菜单代码
Bootstrap实现下拉菜单多级联动
08-28
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
博主推荐html好看的列表滚动效果（源码）
05-20
【博主推荐】html好看的列表滚动效果（附源码） - 功能实现 >1.实现列表滚动，上下无缝衔接； >2.实现鼠标悬浮停止滚动； >3.实现多列表滚动;
博主推荐html下拉框树形（附好看的登录界面）
05-10
完善的树形下拉框功能，根据自定义层级规则展开，可以直接嵌入项目，还附带两个漂亮的登录界面； 更多介绍：https://blog.csdn.net/weixin_43151418/article/details/124689160
Select精美下拉框(漂亮)
10-24
[removed] // ViaSelect Environment Constants var SS_ENV = new Object(); SS_ENV.IE_Version = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]); SS_ENV.CR = new Object(); SS_ENV.CR.ReverseBackground = '#E2519C'; SS_ENV.CR.ReverseText = 'white'; SS_ENV.CR.Border = '#D55C9A'; SS_ENV.CR.BorderActive = '#FF6CB7'; SS_ENV.DefaultHeight = 20; SS_ENV.ButtonWidth = 13; SS_ENV.OptionsDivStyle = '' + ' display:none;' + ' z-index:10;' + ' position:absolute;' + ' border:1 solid '+ SS_ENV.CR.Border+';' + ' background-color:white;' + ' scrollbar-face-color:#D4D0C8;' + ' scrollbar-shadow-color:white;' + ' scrollbar-highlight-color:#F6F5F4;' + ' scrollbar-3dlight-color:white' + ' scrollbar-darkshadow-color:#86837E;' + ' scrollbar-track-color:#F6F5F4;' + ' scrollbar-arrow-color:#86837E;'; SS_ENV.OptionNobrStyle = '' + ' font-size:12px;' + ' font-family:奔覆;'; // SaySelect Variables var SS_VAR = new Object(); SS_VAR.DivDummy = document.createElement("DIV"); SS_VAR.SelectList = new Array(); SS_VAR.bEventAttached = false; var SS_CreatedElements = new Object(); function unloadObjects() { try { if (SS_VAR && SS_VAR.SelectList) { for (key in SS_VAR.SelectList) { if (SS_VAR.SelectList[key]) { try { SS_VAR.SelectList[key].select.setAttribute('SS', 0); } catch (e) {}; delete SS_VAR.SelectList[key]; } } } } catch (e) {}; } attachEvent("onunload", unloadObjects); function SS_create (srcHTML, ListMax, bAutoDetect) { // property this.ssID = SS_VAR.SelectList.length; this.bOriginalSelect = (bAutoDetect && SS_ENV.IE_Version < 5.5); this.select = SS_createElement(srcHTML); this.selectedIndex = this.select.selectedIndex; this.options = this.select.options; this.width = parseInt(this.select.style.width); this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultHeight; this.OptionHeight = this.height - 4; this.bListDown = (ListMax && '-'==ListMax.toString().substr(0, 1)) ? false : true; this.ListMax = (!isNaN(parseInt(ListMax))) ? Math.abs(ListMax) : 100; this.Table; this.TitleDiv; this.TitleTable; this.TitleWrapper; this.OptionsDiv; this.OptionsWrapper; this.OptionsTable; this.bFocused = false; this.bExpanded = false; this.bReverse = false; // private method this.isThisEventToBeCanceled = SS_isThisEventToBeCanceled; this.toggleTitle = SS_toggleTitle; this.syncSelectedIndex = SS_syncSelectedIndex; this.toggleOptions = SS_toggleOptions; this.turnOnOption = SS_turnOnOption; this.turnOffOption = SS_turnOffOption; this.handleMousewheel = SS_handleMousewheel; this.handleOverTitle = SS_handleOverTitle; this.handleOutTitle = SS_handleOutTitle; this.handleOverOption = SS_handleOverOption; this.createTable = SS_createTable; this.createTitleDiv = SS_createTitleDiv; this.createOptionsDiv = SS_createOptionsDiv; this.createOptionTr = SS_createOptionTr; this.adjustOptionsDiv = SS_adjustOptionsDiv; this.syncOptions = SS_syncOptions; this.pressOption = SS_pressOption; this.moveOption = SS_moveOption; this.releaseOption = SS_releaseOption; this.pressTitle = SS_pressTitle; this.releaseTitle = SS_releaseTitle; // public method this.display = SS_display; this.insertOption = SS_insertOption; this.deleteOption = SS_deleteOption; this.changeOption = SS_changeOption; // initiate this.createTable(); this.select.setAttribute('SS', this); if (!this.bOriginalSelect) this.select. SS_VAR.SelectList[this.ssID] = this; } function SS_display () { [removed]("<div id=SS_TempDiv></div>\n"); document.all.SS_TempDiv.appendChild(this.Table); document.all.SS_TempDiv.removeNode(); } function SS_write (srcHTML, ListMax, bAutoDetect) { var oSS = new SS_create(srcHTML, ListMax, bAutoDetect); oSS.display(); return oSS; } function SS_insertOption (value, innerText, idx) { var NewOption = document.createElement("OPTION"); SS_CreatedElements[SS_CreatedElements.length] = NewOption; this.options.add(NewOption, idx); NewOption.innerText = innerText; NewOption.value = value; if (!this.bOriginalSelect) this.createOptionTr(idx); this.syncOptions(); this.adjustOptionsDiv(); this.syncSelectedIndex(); } function SS_deleteOption (idx) { this.options.remove(idx); if (!this.bOriginalSelect) this.OptionsTable.deleteRow(idx); this.syncOptions(); this.adjustOptionsDiv(); this.syncSelectedIndex(); } function SS_changeOption (idx, value, innerText) { this.options[idx].value = value; this.options[idx].innerText = innerText; this.syncOptions(); this.syncSelectedIndex(); } function SS_cancelEvent (event) { event.cancelBubble = true; event.returnValue = false; } function SS_isThisEventToBeCanceled (event) { if ('object' == typeof(event)) { switch (event.type) { case 'mousedown': if (!(event.button & 1)) return true; break; case 'mouseup': if (!(event.button & 1)) return true; if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) { this.srcElementOfLastMousedown = null; return true; } break; case 'mouseout': if (!(SS_ENV.IE_Version < 5.5 && event.srcElement == this.srcElementOfLastMousedown)) return true; break; case 'mousemove': if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) return true; break; } } return false; } function SS_createElement (html) { SS_VAR.DivDummy.insertAdjacentHTML('afterBegin', html); var oEl = SS_VAR.DivDummy.children(0); while (SS_VAR.DivDummy.children.length > 0) { SS_VAR.DivDummy.removeChild(SS_VAR.DivDummy.children(0)); } return oEl; } function SS_blurExcept (except) { SS_cancelEvent(window.event); except = ('number'==typeof(except)) ? except : -1; var bHasToDetachEvent = true; for (var i=0; i < SS_VAR.SelectList.length; i++) { if (-1==except && SS_VAR.SelectList[i].bFocused && SS_VAR.SelectList[i].bExpanded) { SS_VAR.SelectList[i].toggleOptions(false, true); SS_VAR.SelectList[i].toggleTitle(true); bHasToDetachEvent = false; } else if (i!=except) { if (SS_VAR.SelectList[i].bExpanded) SS_VAR.SelectList[i].toggleOptions(false, true); if (SS_VAR.SelectList[i].bReverse) SS_VAR.SelectList[i].toggleTitle(false); SS_VAR.SelectList[i].bFocused = false; } } if (SS_VAR.bEventAttached && bHasToDetachEvent) { document.detachEvent('onmousedown', SS_blurExcept); document.detachEvent('ondblclick', SS_blurExcept); SS_VAR.bEventAttached = false; } } function SS_syncSelectedIndex () { this.selectedIndex = this.select.selectedIndex; if (this.bOriginalSelect) return; if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText) this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText; if (this.bExpanded) this.toggleOptions(false); } function SS_toggleTitle (bReverse) { this.bReverse = ('undefined'!=typeof(bReverse)) ? bReverse: (!this.bReverse); this.TitleTable.cells(0).style.backgroundColor = this.bReverse ? SS_ENV.CR.ReverseBackground : ''; this.TitleTable.cells(0).style.color = this.bReverse ? SS_ENV.CR.ReverseText : ''; } function SS_toggleOptions (bExpanded, bStrict) { if (!bStrict && !this.bFocused) { SS_blurExcept(this.ssID); } this.bExpanded = ('undefined'!=typeof(bExpanded)) ? bExpanded: (!this.bExpanded); if (this.bExpanded) { this.adjustOptionsDiv(); this.OptionsDiv.style.display = 'block'; if (!bStrict) { this.toggleTitle(false); this.handleOverOption(this.selectedIndex); } this.handleOutTitle(); } else { this.OptionsDiv.style.display = 'none'; if (!bStrict) { this.toggleTitle(true); } } if (!bStrict) { this.bFocused = true; if (!SS_VAR.bEventAttached) { document.attachEvent('onmousedown', SS_blurExcept); document.attachEvent('ondblclick', SS_blurExcept); SS_VAR.bEventAttached = true; } } } function SS_handlePropertychange () { if ('propertychange'==window.event.type && 'selectedIndex'==window.event.propertyName) { var oSS = window.event.srcElement.SS; oSS.syncSelectedIndex(); if (null != oSS.select.onchange) oSS.select.onchange(); } } function SS_handleMousewheel (event) { var idx = this.selectedIndex; if ('mousewheel'==event.type && this.bFocused && this.bReverse) { for (var i=0; i < event.wheelDelta; i += 120) idx--; for (var i=0; i > event.wheelDelta; i -= 120) idx++; } idx = Math.max(idx, 0); idx = Math.min(idx, this.options.length - 1); this.select.selectedIndex = idx; } function SS_handleOverTitle () { if (this.bExpanded) return; this.TitleTable.style.borderColor = SS_ENV.CR.BorderActive; this.TitleTable.cells(1).style.display = 'none'; this.TitleTable.cells(2).style.display = 'block'; } function SS_handleOutTitle () { this.TitleTable.style.borderColor = SS_ENV.CR.Border; this.TitleTable.cells(2).style.display = 'none'; this.TitleTable.cells(1).style.display = 'block'; } function SS_handleOverOption (idx) { for (var i=0; i < this.options.length; i++) { if (i==idx) this.turnOnOption(i); else this.turnOffOption(i); } } function SS_turnOnOption (idx) { this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseText; this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseBackground; } function SS_turnOffOption (idx) { this.OptionsTable.cells(idx).style.color = ''; this.OptionsTable.cells(idx).style.backgroundColor = ''; } function SS_adjustOptionsDiv () { if (this.bOriginalSelect) return; this.OptionsDiv.style.width = this.width; this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2; this.OptionsWrapper.style.height = this.options.length * this.OptionHeight; this.OptionsDiv.style.overflowY = (this.options.length > this.ListMax) ? 'scroll' : ''; var top = this.Table.offsetTop; var left = this.Table.offsetLeft; for (var El = this.Table.offsetParent; 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style.position; El = El.offsetParent) { if ('TABLE' != El.tagName) { top += El.clientTop; left += El.clientLeft; } top += El.offsetTop; left += El.offsetLeft; } this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height)); this.OptionsDiv.style.left = left; this.TitleWrapper.style.top = 0; this.TitleWrapper.style.left = 0; } function SS_syncOptions () { if (this.bOriginalSelect) return; for (var i=0; i < this.options.length; i++) { this.OptionsTable.cells(i).setAttribute('index', i); if (this.OptionsTable.cells(i).childNodes(0).innerText != this.options[i].innerText) this.OptionsTable.cells(i).childNodes(0).innerText = this.options[i].innerText; } } function SS_pressTitle (event) { SS_cancelEvent(event); this.srcElementOfLastMousedown = event.srcElement; this.toggleOptions(); } function SS_releaseTitle (event) { SS_cancelEvent(event); if (this.isThisEventToBeCanceled(event)) return; this.srcElementOfLastMousedown = null; } function SS_pressOption (event) { SS_cancelEvent(event); this.srcElementOfLastMousedown = event.srcElement; } function SS_moveOption (event) { SS_cancelEvent(event); if (this.isThisEventToBeCanceled(event)) return; if (!(event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth)) return; this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight)); } function SS_releaseOption (event) { SS_cancelEvent(event); if (this.isThisEventToBeCanceled(event)) return; this.srcElementOfLastMousedown = null; if (event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth) { this.toggleOptions(false); this.select.selectedIndex = Math.floor(event.offsetY / this.OptionHeight); } } function SS_createTable () { this.Table = SS_createElement("" + "<table border=0 cellpadding=0 cellspacing=0 cursor:default'>" + "<tr><td></td></tr>" + "</table>" ); if (!isNaN(this.width)) this.Table.style.width = this.width; this.Table.style.height = this.height; if (!this.bOriginalSelect) { this.createTitleDiv(); this.createOptionsDiv(); this.Table.cells(0).appendChild(this.TitleDiv); this.Table.cells(0).appendChild(this.OptionsDiv); } else { this.Table.cells(0).appendChild(this.select); } } function SS_createTitleDiv () { this.TitleDiv = SS_createElement("" + "<div top:0; left:0;'>" + " <table border=0 cellpadding=0 cellspacing=1" + " height="+this.height + " bgcolor=white" + " border:1 solid "+SS_ENV.CR.Border+";'" + " + " >" + " <tr>" + " <td><nobr + " <td width="+SS_ENV.ButtonWidth+" align=center + " <td width="+SS_ENV.ButtonWidth+" align=center + " <td ></td>" + " </tr>" + " </table>" + "</div>" ); this.TitleTable = this.TitleDiv.childNodes(0); this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText; this.TitleTable.cells(1)[removed] = "<img src='btn_down.gif'>"; this.TitleTable.cells(2)[removed] = "<img src='btn_down_s.gif'>"; this.TitleTable.cells(3).appendChild(this.select); this.TitleWrapper = document.createElement("" + "<img SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event);' ); SS_CreatedElements[SS_CreatedElements.length] = this.TitleWrapper; this.TitleDiv.appendChild(this.TitleWrapper); } function SS_createOptionsDiv () { this.OptionsDiv = SS_createElement("" + "<div + " + " + ">" + " <table border=0 cellpadding=0 cellspacing=0 width=100% + " </table>" + "</div>" ); this.OptionsTable = this.OptionsDiv.childNodes(0); for (var i=0; i < this.options.length; i++) { this.createOptionTr(i); } this.syncOptions(); this.OptionsWrapper = document.createElement("" + "<img ); SS_CreatedElements[SS_CreatedElements.length] = this.OptionsWrapper; this.OptionsDiv.appendChild(this.OptionsWrapper); } function SS_createOptionTr (idx) { idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1; var OptionTr = this.OptionsTable.insertRow(-1); var OptionTd = document.createElement("<td height="+this.OptionHeight+"></td>"); SS_CreatedElements[SS_CreatedElements.length] = this.OptionsTd; OptionTd.appendChild(document.createElement("<nobr OptionTr.appendChild(OptionTd); } [removed] </head> <body>[removed]SS_write("<select name=star>\n" +" <option value=\"\" selected>不限</option>\n" +"<option value=\"水瓶座\">水瓶座</option>" +"<option value=\"双鱼座\">双鱼座</option>" +"<option value=\"白羊座\">白羊座</option>" +"<option value=\"金牛座\">金牛座</option>" +"<option value=\"双子座\">双子座</option>" +"<option value=\"巨蟹座\">巨蟹座</option>" +"<option value=\"狮子座\">狮子座</option>" +"<option value=\"处女座\">处女座</option>" +"<option value=\"天秤座\">天秤座</option>" +"<option value=\"天蝎座\">天蝎座</option>" +"<option value=\"射手座\">射手座</option>" +"<option value=\"摩羯座\">摩羯座</option>" +"</select>\n"); [removed] <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td>[removed]SS_write("<select name='province' >\n" +"<option value=\"\" selected>都行</option>\n" +"<option value=\"北京\">北京</option>" +"<option value=\"上海\">上海</option>" +"<option value=\"天津\">天津</option>" +"<option value=\"重庆\">重庆</option>" +"<option value=\"安徽\">安徽</option>" +"<option value=\"福建\">福建</option>" +"<option value=\"甘肃\">甘肃</option>" +"<option value=\"广东\">广东</option>" +"<option value=\"广西\">广西</option>" +"<option value=\"贵州\">贵州</option>" +"<option value=\"海南\">海南</option>" +"<option value=\"河北\">河北</option>" +"<option value=\"黑龙江\">黑龙江</option>" +"<option value=\"河南\">河南</option>" +"<option value=\"湖北\">湖北</option>" +"<option value=\"湖南\">湖南</option>" +"<option value=\"内蒙古\">内蒙古</option>" +"<option value=\"江苏\">江苏</option>" +"<option value=\"江西\">江西</option>" +"<option value=\"吉林\">吉林</option>" +"<option value=\"辽宁\">辽宁</option>" +"<option value=\"宁夏\">宁夏</option>" +"<option value=\"青海\">青海</option>" +"<option value=\"山西\">山西</option>" +"<option value=\"陕西\">陕西</option>" +"<option value=\"山东\">山东</option>" +"<option value=\"四川\">四川</option>" +"<option value=\"江西\">江西</option>" +"<option value=\"西藏\">西藏</option>" +"<option value=\"新疆\">新疆</option>" +"<option value=\"云南\">云南</option>" +"<option value=\"浙江\">浙江</option>" +"<option value=\"其它\">其它</option>" +"</select>\n",8); [removed]</td> </tr> </table> <br>
HTML下拉框样式美化
老杨头的博客
02-24 5834
在网页中，下拉框的样式最难美化，默认样式巨丑，好在现在已经有各种框架实现了下拉框的样式美化，主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换，再将对应选项及事件进行关联。最近一项目需要修改很久以前的页面，用户需求又需要美化下拉框样式，又不能引入第三方的框架，只好自己动手写了一个JS插件，实现下拉框的样式美化。
ul好看的li列表样式
qq3892997的博客
03-15 2384
*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*//*以上就是一个稍微好看的有编号的li列表 *//*第1行的行号样式*//*第2行的行号样式*//*第3行的行号样式*//*鼠标移过更好看*/
点击按钮，显示多条子菜单(html)
peichuangaoling的专栏
03-16 2157
单击按钮，显示多级下拉菜单                           .dropdown-submenu {             position: relative;         }         .dropdown-submenu > .dropdown-menu {             top: 0;             left:
制作伸缩两级菜单（HTML,CSS,JavaScript）
weixin_43230812的博客
03-09 1924
制作伸缩两级菜单（HTML,CSS,JavaScript）
html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
weixin_39725594的博客
06-07 2082
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件。该导航菜单在bootstrap样式的基础上，通过jQuery来为导航菜单绑定菜单点击事件，生成非常漂亮的多级侧边栏导航菜单。使用方法在页面中引入bootstrap样式文件，sidebar-menu.css和sidebar-menu.js文件，另外还有引入font-awesome字体图标文件。HTML结构在该多级侧边栏导航菜单中...
html中左侧二级菜单栏,html+css+原生js：多级左菜单
weixin_30941657的博客
06-02 1469
直接上源码；#olTree ol{display:none}.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}/*隐藏input*/.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: ...
html多级下拉菜单
最新发布
09-13
HTML多级下拉菜单可以使用jQuery和Bootstrap来实现。首先，在HTML中添加必要的代码和样式链接。然后，使用jQuery编写脚本来控制下拉菜单的行为。接下来，使用Bootstrap的CSS类来创建多级下拉菜单的外观效果。 在页面的<head>标签中，引入必要的jQuery和Bootstrap的样式文件： ```html <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> ``` 在<body>标签中，创建下拉菜单的HTML结构。使用Bootstrap的.dropdown和.dropdown-submenu类来实现多级下拉菜单的效果： ```html <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">子菜单 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">子菜单 1.1</a></li> <li><a tabindex="-1" href="#">子菜单 1.2</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">子菜单 2 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">子菜单 2.1</a></li> <li class="dropdown-submenu"> <a class="test" href="#">子菜单 2.2 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">子菜单 2.2.1</a></li> <li><a href="#">子菜单 2.2.2</a></li> </ul> </li> </ul> </li> </ul> </div> </body> ``` 接下来，在页面的底部，添加以下JavaScript代码来实现下拉菜单的行为： ```html <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> ``` 以上代码中，通过选择器绑定了.dropdown-submenu类下的a.test元素的点击事件。当点击菜单项时，使用toggle()方法来显示或隐藏下级菜单。同时，使用stopPropagation()方法来阻止事件冒泡，避免影响到其他菜单项。 通过以上步骤，你就可以实现一个多级下拉菜单的HTML页面了。请根据你的需求修改代码并添加样式来定制菜单的外观。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值