css导航菜单代码

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language="javascript">
navHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehoverb"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
<STYLE type=text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>>
BODY {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: #fff; PADDING-BOTTOM: 30px; MARGIN: 0px; COLOR: #666; PADDING-TOP: 30px
}
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
}
UL#navmenu {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px;  PADDING-TOP: 0px; BORDER-BOTTOM: 0px; LIST-STYLE-TYPE: none; }
UL#navmenu LI {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; LIST-STYLE-TYPE: none; POSITION: relative; }
UL#navmenu UL {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px;  PADDING-TOP: 0px; BORDER-BOTTOM: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 24px
}
UL#navmenu UL LI {
	DISPLAY: inline; FLOAT: none
}
UL#navmenu A {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 6px; BACKGROUND: #eee; FLOAT: left; PADDING-BOTTOM: 0px; FONT: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; BORDER-LEFT: #fff 1px solid; COLOR: #666; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 1%; TEXT-DECORATION: none
}
UL#navmenu A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover LI A {
	BACKGROUND: #eee; FLOAT: none; COLOR: #666
}
UL#navmenu LI.iehover LI A {
	BACKGROUND: #eee; FLOAT: none; COLOR: #666
}
UL#navmenu LI:hover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover LI:hover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover LI.iehover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover LI:hover LI A {
	BACKGROUND: #eee; COLOR: #666
}
UL#navmenu LI.iehover LI.iehover LI A {
	BACKGROUND: #eee; COLOR: #666
}
UL#navmenu LI:hover LI:hover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover LI:hover LI:hover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover LI.iehover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover LI.iehover LI.iehover A {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI:hover LI:hover LI:hover LI A {
	BACKGROUND: #eee; COLOR: #666
}
UL#navmenu LI.iehover LI.iehover LI.iehover LI A {
	BACKGROUND: #eee; COLOR: #666
}
UL#navmenu LI:hover LI:hover LI:hover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu LI.iehover LI.iehover LI.iehover LI A:hover {
	BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu UL UL {
	DISPLAY: none; LEFT: 160px; POSITION: absolute; TOP: 0px
}
UL#navmenu UL UL UL {
	DISPLAY: none; LEFT: 160px; POSITION: absolute; TOP: 0px
}
UL#navmenu LI:hover UL UL {
	DISPLAY: none
}
UL#navmenu LI:hover UL UL UL {
	DISPLAY: none
}
UL#navmenu LI.iehover UL UL {
	DISPLAY: none
}
UL#navmenu LI.iehover UL UL UL {
	DISPLAY: none
}
UL#navmenu LI:hover UL {
	DISPLAY: block
}
UL#navmenu UL LI:hover UL {
	DISPLAY: block
}
UL#navmenu UL UL LI:hover UL {
	DISPLAY: block
}
UL#navmenu LI.iehover UL {
	DISPLAY: block
}
UL#navmenu UL LI.iehover UL {
	DISPLAY: block
}
UL#navmenu UL UL LI.iehover UL {
	DISPLAY: block
}

</STYLE>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY>
<H1>CSS Menu - Horizontal 5</H1>
<HR>

<UL id=navmenu>
  <LI><A 
  href="http://www.111com.net/">Home</A> 
  </LI>
  <LI><A 
  href="#">Work 
  +</A> 
  <UL>
    <LI><A 
    href="#">Websites 
    +</A> 
    <UL>
      <LI><A 
      href="#">qrayg</A>

<LI><A 
      href="#">qArcade</A>

<LI><A 
      href="#">qDT</A> 
      </LI></UL>
    <LI><A 
    href="#">Pen 
    and Ink</A> 
    <LI><A 
    href="#">Free 
    Interfaces</A> </LI></UL></LI>
  <LI><A 
  href="#">Learn 
  +</A> 
  <UL>
    <LI><A 
    href="#">Fireworks 
    +</A> 
    <UL>
      <LI><A 
      href="#">aquaButton</A>

<LI><A 
      href="#">aquaButton2</A>

<LI><A 
      href="#">waterDrop</A>

<LI><A 
      href="#">lightFX</A>

<LI><A 
      href="#">lightFX2</A> 
      </LI></UL>
    <LI><A 
    href="#">CSS 
    +</A> 
    <UL>
      <LI><A 
      href="#">footerStick</A>

<LI><A 
      href="#">spriteNav</A>

<LI><A 
      href="#">@import</A> 
      </LI></UL></LI></UL></LI>
  <LI><A 
  href="#">Info</A> 
  </LI>
  <LI><A 
  href="#">Contact</A> 
  </LI></UL>
<HR>

提示：您可以先修改部分代码再运行

css导航菜单代码

相关文章

精彩推荐