html下拉菜单无边框怎么弄

html-css012

html下拉菜单无边框怎么弄,第1张

html下拉菜单无边框操作步骤如下：

1、在游戏内。按Esc键弹出设置窗口。选择视频。

2、在右侧下拉菜单中点击。并在全屏、窗口、无边框中选择无边框。并点击确定按钮。

3、修改游戏显示方式的游戏插件。则需在盒子中将显示方式改为有边框并确定。或者选择非纯净模式并确定。

下拉菜单不知您说的是哪种，表单元素提供了select下拉框，完全满足下拉菜单的需求。

如果是导航类的下拉菜单的话，首先给可选择的主体部分设置宽高，相对定位属性。然后主体部分建子标签，也就是下拉出来的部分，这部分设置display:none，绝对定位。通过事件是鼠标悬浮或者点击来动态切换子标签的display，none为隐藏，block为显示。

下拉菜单，其实就是使用HTML+css和一些小小的js就能很简单的实现，

首先需要你有至少有2个div然后在将第一个div作为父级元素，然后在使用position:absolut绝对定位一下；

然后在使用JS，获取对象，然后添加一个鼠标的onmouseover事件就行了

在这里给你看下我以前的写的一个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>简洁实用的二级下拉导航菜单</title>

<meta http-equiv="content-type" content="text/htmlcharset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

body,html{padding:0margin:0text-align:centerfont:normal 14px 'arial'}

#mainNavBar{width:100%background:#999padding:10px 0}

#nav{width:760pxheight:30pxmargin:0 auto}

#nav ul{padding:0margin:0}

#nav ul li{position:relativefloat:leftwidth:60pxheight:30pxline-height:30pxoverflow:hiddenlist-style-type:none}

#nav ul li a{display:blockcolor:#ffftext-decoration:none}

#nav ul li a:hover{font-weight:boldbackground:#666}

#subNav{position:absolutewidth:150pxtop:30pxleft:0pxpadding:5pxbackground:#666color:#ffftext-align:left}

#subNav a{text-decoration:nonefont-weight:normaldisplay:block}

#subNav a:hover{color:#f00background:#f00}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="mainNavBar">

<div id="nav">

<ul>

<li>

<a href="#">Add</a>

<div id="subNav">

<a href="#">写日志</a>

<a href="#">增加分类</a>

</div>

</li>

<li>

<a href="#">Edit</a>

<div id="subNav">

<a href="#">修改分类</a>

<a href="#">文章编辑</a>

</div>

</li>

<li>

<a href="#">Admin</a>

<div id="subNav">

<a href="#">文章管理</a>

<a href="#">评论管理</a>

<a href="#">留言管理</a>

<a href="#">退出</a>

</div>

</li>

</ul>

</div>

</div>

<script language="javascript">

var nav=document.getElementById("nav").getElementsByTagName("li")

for(i=0i<nav.lengthi++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold"

this.style.overflow="visible"

this.style.background="#666666"

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal"

this.style.background="#999999"

this.style.overflow="hidden"

}

}

</script>

</body>

</html>

#header #shousuo{

width:950px

height:50px

background:#f4f4f4

margin-top:10px

}

#shousuo ul li{

line-height:50px

list-style-type:none

float:left

margin-left:5px

font-weight:bold

font-size:14px

}