现有CSS样式,左侧导航条二级菜单下拉,求如何修改成向右扩展?

现有CSS如下:.nav{margin-top:1px;height:3;background:url(../Image/bg.gif)repeat-x;position... 现有CSS如下:
.nav {
margin-top:1px;
height:3;
background: url(../Image/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:3;
z-index:1;
padding:0;
visibility: visible;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(..Iimage/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}

.nav .select a:hover,
.nav .select li:hover a {
background: url(..Image/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(../Image/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(..Image/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
展开
 我来答
lp5276159be1
2011-12-19 · TA获得超过2万个赞
知道大有可为答主
回答量:1万
采纳率:39%
帮助的人:4374万
展开全部
你试试这个

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta content="1" name="keywords" />
<title>111</title>
</head>

<body>
<style type="text/css">

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

</style>
<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>
</body>
</html>
更多追问追答
追问
谢谢,可是没有二级菜单啊
追答
字数限制没法再发了,给你2个网站你自己去找找看
http://www.lanrentuku.com/js/nav.html
http://www.divcss5.com/css-texiao/
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2011-12-19
展开全部
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码

参考资料: http://www.blueidea.com/common/shoutbox/redir.asp?5=e&id=11931

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
heroinmyeye
2011-12-19
知道答主
回答量:14
采纳率:0%
帮助的人:2.3万
展开全部
看了你的问题 有点复杂!
更多追问追答
追问
就是如果要向右扩展二级菜单,要怎么做呢
追答
你可以控制js  和css代码 主要控制display 这个属性。  这个兼容性好。

如果适用hover的css代码这个兼容性不好。
建议用第一个方法。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式