你这样理解吧，div
.ui-slider-range
.hilite就是DIV下class为ui-slider-range下class为hilite的元素。
在某些布局下，没有空格，是错误的，是不会应用上的，
不在家,先做个记号,晚上回去告诉你,很简单的用JS调用一段代码.
回家来了
先把
******
CODE
******
这一段复制到记事本另存为menu.JS
然后再把
######
CODE
######
这一段别存为MENU.HTM
看看是不是你要的效果
（以下代码都不要复制***和###）
***********************************************
/**
* mm_menu 20MAR2002 Version 6.0
* Andy Finnell, March 2002
* Copyright (c) 2000-2002 Macromedia, Inc.
*
* based on menu.js
* by gary smith, July 1997
* Copyright (c) 1997-1999 Netscape Communications Corp.
*
* Netscape grants you a royalty free license to use or modify this
* software provided that this copyright notice appears on all copies.
* This software is provided "AS IS," without a warranty of any kind.
*/
function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn, valgn, pad, space, to, sx, sy, srel, opq, vert, idt, aw, ah)
{
this.version = "020320 [Menumm_menu.js]"
this.type = "Menu"
this.menuWidth = mw
this.menuItemHeight = mh
this.fontSize = fs
this.fontWeight = "plain"
this.fontFamily = fnt
this.fontColor = fclr
this.fontColorHilite = fhclr
this.bgColor = "#555555"
this.menuBorder = 1
this.menuBgOpaque=opq
this.menuItemBorder = 1
this.menuItemIndent = idt
this.menuItemBgColor = bg
this.menuItemVAlign = valgn
this.menuItemHAlign = halgn
this.menuItemPadding = pad
this.menuItemSpacing = space
this.menuLiteBgColor = "#ffffff"
this.menuBorderBgColor = "#777777"
this.menuHiliteBgColor = bgh
this.menuContainerBgColor = "#cccccc"
this.childMenuIcon = "arrows.gif"
this.submenuXOffset = sx
this.submenuYOffset = sy
this.submenuRelativeToItem = srel
this.vertical = vert
this.items = new Array()
this.actions = new Array()
this.childMenus = new Array()
this.hideOnMouseOut = true
this.hideTimeout = to
this.addMenuItem = addMenuItem
this.writeMenus = writeMenus
this.MM_showMenu = MM_showMenu
this.onMenuItemOver = onMenuItemOver
this.onMenuItemAction = onMenuItemAction
this.hideMenu = hideMenu
this.hideChildMenu = hideChildMenu
if (!window.menus) window.menus = new Array()
this.label = " " + label
window.menus[this.label] = this
window.menus[window.menus.length] = this
if (!window.activeMenus) window.activeMenus = new Array()
}
function addMenuItem(label, action) {
this.items[this.items.length] = label
this.actions[this.actions.length] = action
}
function FIND(item) {
if( window.mmIsOpera ) return(document.getElementById(item))
if (document.all) return(document.all[item])
if (document.getElementById) return(document.getElementById(item))
return(false)
}
function writeMenus(container) {
if (window.triedToWriteMenus) return
var agt = navigator.userAgent.toLowerCase()
window.mmIsOpera = agt.indexOf("opera") != -1
if (!container &&document.layers) {
window.delayWriteMenus = this.writeMenus
var timer = setTimeout('delayWriteMenus()', 500)
container = new Layer(100)
clearTimeout(timer)
} else if (document.all || document.hasChildNodes || window.mmIsOpera) {
document.writeln('<span id="menuContainer"></span>')
container = FIND("menuContainer")
}
window.mmHideMenuTimer = null
if (!container) return
window.triedToWriteMenus = true
container.isContainer = true
container.menus = new Array()
for (var i=0i<window.menus.lengthi++)
container.menus[i] = window.menus[i]
window.menus.length = 0
var countMenus = 0
var countItems = 0
var top = 0
var content = ''
var lrs = false
var theStat = ""
var tsc = 0
if (document.layers) lrs = true
for (var i=0i<container.menus.lengthi++, countMenus++) {
var menu = container.menus[i]
if (menu.bgImageUp || !menu.menuBgOpaque) {
menu.menuBorder = 0
menu.menuItemBorder = 0
}
if (lrs) {
var menuLayer = new Layer(100, container)
var lite = new Layer(100, menuLayer)
lite.top = menu.menuBorder
lite.left = menu.menuBorder
var body = new Layer(100, lite)
body.top = menu.menuBorder
body.left = menu.menuBorder
} else {
content += ''+
'<div id="menuLayer'+ countMenus +'" style="position:absolutez-index:1left:10pxtop:'+ (i * 100) +'pxvisibility:hiddencolor:' + menu.menuBorderBgColor + '">\n'+
' <div id="menuLite'+ countMenus +'" style="position:absolutez-index:1left:'+ menu.menuBorder +'pxtop:'+ menu.menuBorder +'pxvisibility:hide" onmouseout="mouseoutMenu()">\n'+
' <div id="menuFg'+ countMenus +'" style="position:absoluteleft:'+ menu.menuBorder +'pxtop:'+ menu.menuBorder +'pxvisibility:hide">\n'+
''
}
var x=i
for (var i=0i<menu.items.lengthi++) {
var item = menu.items[i]
var childMenu = false
var defaultHeight = menu.fontSize+2*menu.menuItemPadding
if (item.label) {
item = item.label
childMenu = true
}
menu.menuItemHeight = menu.menuItemHeight || defaultHeight
var itemProps = ''
if( menu.fontFamily != '' ) itemProps += 'font-family:' + menu.fontFamily +''
itemProps += 'font-weight:' + menu.fontWeight + 'fontSize:' + menu.fontSize + 'px'
if (menu.fontStyle) itemProps += 'font-style:' + menu.fontStyle + ''
if (document.all || window.mmIsOpera)
itemProps += 'font-size:' + menu.fontSize + 'px" onmouseover="onMenuItemOver(null,this)" onclick="onMenuItemAction(null,this)'
else if (!document.layers) {
itemProps += 'font-size:' + menu.fontSize + 'px'
}
var l
if (lrs) {
var lw = menu.menuWidth
if( menu.menuItemHAlign == 'right' ) lw -= menu.menuItemPadding
l = new Layer(lw,body)
}
var itemLeft = 0
var itemTop = i*menu.menuItemHeight
if( !menu.vertical ) {
itemLeft = i*menu.menuWidth
itemTop = 0
}
var dTag = '<div id="menuItem'+ countItems +'" style="position:absoluteleft:' + itemLeft + 'pxtop:'+ itemTop +'px'+ itemProps +'">'
var dClose = '</div>'
if (menu.bgImageUp) dTag = '<div id="menuItem'+ countItems +'" style="background:url('+menu.bgImageUp+')position:absoluteleft:' + itemLeft + 'pxtop:'+ itemTop +'px'+ itemProps +'">'
var left = 0, top = 0, right = 0, bottom = 0
left = 1 + menu.menuItemPadding + menu.menuItemIndent
right = left + menu.menuWidth - 2*menu.menuItemPadding - menu.menuItemIndent
if( menu.menuItemVAlign == 'top' ) top = menu.menuItemPadding
if( menu.menuItemVAlign == 'bottom' ) top = menu.menuItemHeight-menu.fontSize-1-menu.menuItemPadding
if( menu.menuItemVAlign == 'middle' ) top = ((menu.menuItemHeight/2)-(menu.fontSize/2)-1)
bottom = menu.menuItemHeight - 2*menu.menuItemPadding
var textProps = 'position:absoluteleft:' + left + 'pxtop:' + top + 'px'
if (lrs) {
textProps +=itemProps + 'right:' + right + 'bottom:' + bottom + ''
dTag = ""
dClose = ""
}
if(document.all &&!window.mmIsOpera) {
item = '<div align="' + menu.menuItemHAlign + '">' + item + '</div>'
} else if (lrs) {
item = '<div style="text-align:' + menu.menuItemHAlign + '">' + item + '</div>'
} else {
var hitem = null
if( menu.menuItemHAlign != 'left' ) {
if(window.mmIsOpera) {
var operaWidth = menu.menuItemHAlign == 'center' ? -(menu.menuWidth-2*menu.menuItemPadding) : (menu.menuWidth-6*menu.menuItemPadding)
hitem = '<div id="menuItemHilite' + countItems + 'Shim" style="position:absolutetop:1pxleft:' + menu.menuItemPadding + 'pxwidth:' + operaWidth + 'pxtext-align:'
+ menu.menuItemHAlign + 'visibility:visible">' + item + '</div>'
item = '<div id="menuItemText' + countItems + 'Shim" style="position:absolutetop:1pxleft:' + menu.menuItemPadding + 'pxwidth:' + operaWidth + 'pxtext-align:'
+ menu.menuItemHAlign + 'visibility:visible">' + item + '</div>'
} else {
hitem = '<div id="menuItemHilite' + countItems + 'Shim" style="position:absolutetop:1pxleft:1pxright:-' + (left+menu.menuWidth-3*menu.menuItemPadding) + 'pxtext-align:'
+ menu.menuItemHAlign + 'visibility:visible">' + item + '</div>'
item = '<div id="menuItemText' + countItems + 'Shim" style="position:absolutetop:1pxleft:1pxright:-' + (left+menu.menuWidth-3*menu.menuItemPadding) + 'pxtext-align:'
+ menu.menuItemHAlign + 'visibility:visible">' + item + '</div>'
}
} else hitem = null
}
if(document.all &&!window.mmIsOpera) item = '<div id="menuItemShim' + countItems + '" style="position:absoluteleft:0pxtop:0px">' + item + '</div>'
var dText = '<div id="menuItemText'+ countItems +'" style="' + textProps + 'color:'+ menu.fontColor +'">'+ item +' </div>\n'
+ '<div id="menuItemHilite'+ countItems +'" style="' + textProps + 'color:'+ menu.fontColorHilite +'visibility:hidden">'
+ (hitem||item) +' </div>'
if (childMenu) content += ( dTag + dText + '<div id="childMenu'+ countItems +'" style="position:absoluteleft:0pxtop:3px"><img src="'+ menu.childMenuIcon +'"></div>\n' + dClose)
else content += ( dTag + dText + dClose)
if (lrs) {
l.document.open("text/html")
l.document.writeln(content)
l.document.close()
content = ''
theStat += "-"
tsc++
if (tsc >50) {
tsc = 0
theStat = ""
}
status = theStat
}
countItems++
}
if (lrs) {
var focusItem = new Layer(100, body)
focusItem.visiblity="hidden"
focusItem.document.open("text/html")
focusItem.document.writeln(" ")
focusItem.document.close()
} else {
content += ' <div id="focusItem'+ countMenus +'" style="position:absoluteleft:0pxtop:0pxvisibility:hide" onclick="onMenuItemAction(null,this)"> </div>\n'
content += ' </div>\n </div>\n</div>\n'
}
i=x
}
if (document.layers) {
container.clip.width = window.innerWidth
container.clip.height = window.innerHeight
container.onmouseout = mouseoutMenu
container.menuContainerBgColor = this.menuContainerBgColor
for (var i=0i<container.document.layers.lengthi++) {
proto = container.menus[i]
var menu = container.document.layers[i]
container.menus[i].menuLayer = menu
container.menus[i].menuLayer.Menu = container.menus[i]
container.menus[i].menuLayer.Menu.container = container
var body = menu.document.layers[0].document.layers[0]
body.clip.width = proto.menuWidth || body.clip.width
body.clip.height = proto.menuHeight || body.clip.height
for (var n=0n<body.document.layers.length-1n++) {
var l = body.document.layers[n]
l.Menu = container.menus[i]
l.menuHiliteBgColor = proto.menuHiliteBgColor
l.document.bgColor = proto.menuItemBgColor
l.saveColor = proto.menuItemBgColor
l.onmouseover = proto.onMenuItemOver
l.onclick = proto.onMenuItemAction
l.mmaction = container.menus[i].actions[n]
l.focusItem = body.document.layers[body.document.layers.length-1]
l.clip.width = proto.menuWidth || body.clip.width
l.clip.height = proto.menuItemHeight || l.clip.height
if (n>0) {
if( l.Menu.vertical ) l.top = body.document.layers[n-1].top + body.document.layers[n-1].clip.height + proto.menuItemBorder + proto.menuItemSpacing
else l.left = body.document.layers[n-1].left + body.document.layers[n-1].clip.width + proto.menuItemBorder + proto.menuItemSpacing
}
l.hilite = l.document.layers[1]
if (proto.bgImageUp) l.background.src = proto.bgImageUp
l.document.layers[1].isHilite = true
if (l.document.layers.length >2) {
l.childMenu = container.menus[i].items[n].menuLayer
l.document.layers[2].left = l.clip.width -13
l.document.layers[2].top = (l.clip.height / 2) -4
l.document.layers[2].clip.left += 3
l.Menu.childMenus[l.Menu.childMenus.length] = l.childMenu
}
}
if( proto.menuBgOpaque ) body.document.bgColor = proto.bgColor
if( proto.vertical ) {
body.clip.width = l.clip.width +proto.menuBorder
body.clip.height = l.top + l.clip.height +proto.menuBorder
} else {
body.clip.height = l.clip.height +proto.menuBorder
body.clip.width = l.left + l.clip.width +proto.menuBorder
if( body.clip.width >window.innerWidth ) body.clip.width = window.innerWidth
}
var focusItem = body.document.layers[n]
focusItem.clip.width = body.clip.width
focusItem.Menu = l.Menu
focusItem.top = -30
focusItem.captureEvents(Event.MOUSEDOWN)
focusItem.onmousedown = onMenuItemDown
if( proto.menuBgOpaque ) menu.document.bgColor = proto.menuBorderBgColor
var lite = menu.document.layers[0]
if( proto.menuBgOpaque ) lite.document.bgColor = proto.menuLiteBgColor
lite.clip.width = body.clip.width +1
lite.clip.height = body.clip.height +1
menu.clip.width = body.clip.width + (proto.menuBorder * 3)
menu.clip.height = body.clip.height + (proto.menuBorder * 3)
}
} else {
if ((!document.all) &&(container.hasChildNodes) &&!window.mmIsOpera) {
container.innerHTML=content
} else {
container.document.open("text/html")
container.document.writeln(content)
container.document.close()
}
if (!FIND("menuLayer0")) return
var menuCount = 0
for (var x=0x<container.menus.lengthx++) {
var menuLayer = FIND("menuLayer" + x)
container.menus[x].menuLayer = "menuLayer" + x
menuLayer.Menu = container.menus[x]
menuLayer.Menu.container = "menuLayer" + x
menuLayer.style.zindex = 1
var s = menuLayer.style
s.pixeltop = -300
s.pixelleft = -300
s.top = '-300px'
s.left = '-300px'
var menu = container.menus[x]
menu.menuItemWidth = menu.menuWidth || menu.menuIEWidth || 140
if( menu.menuBgOpaque ) menuLayer.style.backgroundColor = menu.menuBorderBgColor
var top = 0
var left = 0
menu.menuItemLayers = new Array()
for (var i=0i<container.menus[x].items.lengthi++) {
var l = FIND("menuItem" + menuCount)
l.Menu = container.menus[x]
l.Menu.menuItemLayers[l.Menu.menuItemLayers.length] = l
if (l.addEventListener || window.mmIsOpera) {
l.style.width = menu.menuItemWidth + 'px'
l.style.height = menu.menuItemHeight + 'px'
l.style.pixelWidth = menu.menuItemWidth
l.style.pixelHeight = menu.menuItemHeight
l.style.top = top + 'px'
l.style.left = left + 'px'
if(l.addEventListener) {
l.addEventListener("mouseover", onMenuItemOver, false)
l.addEventListener("click", onMenuItemAction, false)
l.addEventListener("mouseout", mouseoutMenu, false)
}
if( menu.menuItemHAlign != 'left' ) {
l.hiliteShim = FIND("menuItemHilite" + menuCount + "Shim")
l.hiliteShim.style.visibility = "inherit"
l.textShim = FIND("menuItemText" + menuCount + "Shim")
l.hiliteShim.style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent
l.hiliteShim.style.width = l.hiliteShim.style.pixelWidth
l.textShim.style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent
l.textShim.style.width = l.textShim.style.pixelWidth
}
} else {
l.style.pixelWidth = menu.menuItemWidth
l.style.pixelHeight = menu.menuItemHeight
l.style.pixelTop = top
l.style.pixelLeft = left
if( menu.menuItemHAlign != 'left' ) {
var shim = FIND("menuItemShim" + menuCount)
shim[0].style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent
shim[1].style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent
shim[0].style.width = shim[0].style.pixelWidth + 'px'
shim[1].style.width = shim[1].style.pixelWidth + 'px'
}
}
if( menu.vertical ) top = top + menu.menuItemHeight+menu.menuItemBorder+menu.menuItemSpacing
else left = left + menu.menuItemWidth+menu.menuItemBorder+menu.menuItemSpacing
l.style.fontSize = menu.fontSize + 'px'
l.style.backgroundColor = menu.menuItemBgColor
l.style.visibility = "inherit"
l.saveColor = menu.menuItemBgColor
l.menuHiliteBgColor = menu.menuHiliteBgColor
l.mmaction = container.menus[x].actions[i]
l.hilite = FIND("menuItemHilite" + menuCount)
l.focusItem = FIND("focusItem" + x)
l.focusItem.style.pixelTop = -30
l.focusItem.style.top = '-30px'
var childItem = FIND("childMenu" + menuCount)
if (childItem) {
l.childMenu = container.menus[x].items[i].menuLayer
childItem.style.pixelLeft = menu.menuItemWidth -11
childItem.style.left = childItem.style.pixelLeft + 'px'
childItem.style.pixelTop = (menu.menuItemHeight /2) -4
childItem.style.top = childItem.style.pixelTop + 'px'
l.Menu.childMenus[l.Menu.childMenus.length] = l.childMenu
}
l.style.cursor = "hand"
menuCount++
}
if( menu.vertical ) {
menu.menuHeight = top-1-menu.menuItemSpacing
menu.menuWidth = menu.menuItemWidth
} else {
menu.menuHeight = menu.menuItemHeight
menu.menuWidth = left-1-menu.menuItemSpacing
}
var lite = FIND("menuLite" + x)
var s = lite.style
s.pixelHeight = menu.menuHeight +(menu.menuBorder * 2)
s.height = s.pixelHeight + 'px'
s.pixelWidth = menu.menuWidth + (menu.menuBorder * 2)
s.width = s.pixelWidth + 'px'
if( menu.menuBgOpaque ) s.backgroundColor = menu.menuLiteBgColor
var body = FIND("menuFg" + x)
s = body.style
s.pixelHeight = menu.menuHeight + menu.menuBorder
s.height = s.pixelHeight + 'px'
s.pixelWidth = menu.menuWidth + menu.menuBorder
s.width = s.pixelWidth + 'px'
if( menu.menuBgOpaque ) s.backgroundColor = menu.bgColor
s = menuLayer.style
s.pixelWidth = menu.menuWidth + (menu.menuBorder * 4)
s.width = s.pixelWidth + 'px'
s.pixelHeight = menu.menuHeight+(menu.menuBorder*4)
s.height = s.pixelHeight + 'px'
}
}
if (document.captureEvents) document.captureEvents(Event.MOUSEUP)
if (document.addEventListener) document.addEventListener("mouseup", onMenuItemOver, false)
if (document.layers &&window.innerWidth) {
window.onresize = NS4resize
window.NS4sIW = window.innerWidth
window.NS4sIH = window.innerHeight
setTimeout("NS4resize()",500)
}
document.onmouseup = mouseupMenu
window.mmWroteMenu = true
status = ""
}
function NS4resize() {
if (NS4sIW != window.innerWidth || NS4sIH != window.innerHeight) window.location.reload()
}
function onMenuItemOver(e, l) {
MM_clearTimeout()
l = l || this
a = window.ActiveMenuItem
if (document.layers) {
if (a) {
a.document.bgColor = a.saveColor
if (a.hilite) a.hilite.visibility = "hidden"
if (a.Menu.bgImageOver) a.background.src = a.Menu.bgImageUp
a.focusItem.top = -100
a.clicked = false
}
if (l.hilite) {
l.document.bgColor = l.menuHiliteBgColor
l.zIndex = 1
l.hilite.visibility = "inherit"
l.hilite.zIndex = 2
l.document.layers[1].zIndex = 1
l.focusItem.zIndex = this.zIndex +2
}
if (l.Menu.bgImageOver) l.background.src = l.Menu.bgImageOver
l.focusItem.top = this.top
l.focusItem.left = this.left
l.focusItem.clip.width = l.clip.width
l.focusItem.clip.height = l.clip.height
l.Menu.hideChildMenu(l)
} else if (l.style &&l.Menu) {
if (a) {
a.style.backgroundColor = a.saveColor
if (a.hilite) a.hilite.style.visibility = "hidden"
if (a.hiliteShim) a.hiliteShim.style.visibility = "inherit"
if (a.Menu.bgImageUp) a.style.background = "url(" + a.Menu.bgImageUp +")"
}
l.style.backgroundColor = l.menuHiliteBgColor
l.zIndex = 1
if (l.Menu.bgImageOver) l.style.background = "
