DW CSS下拉横向菜单 dreamweaver。。HTML代码。。导航栏怎么变成横向...

dreamweaver\u4e2d\u9879\u76ee\u5217\u8868\u9ed8\u8ba4\u662f\u7ad6\u5411\u7684\uff0c\u5728CSS\u4e2d\u5982\u4f55\u7528\u6837\u5f0f\u628a\u5b83\u53d8\u6210\u6a2a\u5411\u7684

\u4e24\u79cd\u65b9\u6cd5\uff1a
\u4e00\u79cd\u662f\u5de6\u6d6e\u52a8\uff1a{float:left}
Float\u5e38\u8ddf\u5c5e\u6027\u503cleft\u3001right\u3001none
Float:none \u4e0d\u4f7f\u7528\u6d6e\u52a8
Float:left \u9760\u5de6\u6d6e\u52a8
Float:right \u9760\u53f3\u6d6e\u52a8
float\u8bed\u6cd5\uff1a
float : none | left |right
\u53c2\u6570\u503c\uff1a
none : \u3000\u5bf9\u8c61\u4e0d\u6d6e\u52a8
left : \u3000\u5bf9\u8c61\u6d6e\u5728\u5de6\u8fb9
right : \u3000\u5bf9\u8c61\u6d6e\u5728\u53f3\u8fb9


\u5e03\u5c40\u9760\u5de6\u6d6e\u52a8
\u5e03\u5c40\u9760\u53f3\u6d6e\u52a8



\u4e8c\u79cd\u5185\u8054\u6837\u5f0f\uff1a{display:inline;}\u3002
\u4f8b\u5b50\uff1a




p {display: inline}
div {display: none}




\u672c\u4f8b\u4e2d\u7684\u6837\u5f0f\u8868\u628a\u6bb5\u843d\u5143\u7d20\u8bbe\u7f6e\u4e3a\u5185\u8054\u5143\u7d20\u3002


\u800c div \u5143\u7d20\u4e0d\u4f1a\u663e\u793a\u51fa\u6765\uff01

div \u5143\u7d20\u7684\u5185\u5bb9\u4e0d\u4f1a\u663e\u793a\u51fa\u6765\uff01

\u3000\u3000\u9700\u8981\u5199css\uff0c\u8ba9li\u6d6e\u52a8\u6216\u8005\u662f\u53d8\u6210\u5185\u8054\u5143\u7d20\uff0c\u5199\u5728style.css\u91cc\u9762\u3002
\u3000\u3000\u7b2c\u4e00\u79cd\u5199\u6cd5\uff1a
\u3000\u3000li{display:inline-block;}
\u3000\u3000\u7b2c\u4e8c\u79cd\u5199\u6cd5\uff1a
\u3000\u3000li{float:left;}

<ul id="jsddm">

 <li><a id="jsdd" href="#">JavaScript</a>

  <ul>

   <li><a class="DD" href="#">Drop Down</a></li>

   <li><a class="JJ" href="#">jQuery </a></li>

   <li><a class="AA" href="#">Ajax </a></li>

  </ul>

 </li>

</ul>
 #jsddm{

 padding:0;

 width:120px;

 margin-left:100px;

}

#jsddm a{ 

    color:#fff;

 display:block;

 text-align:center;

 text-decoration:none;

}

#jsddm li{

 width:120px;

 list-style:none;

 line-height:30px;

 background:#848484;

}

#jsddm li ul{ 

 margin:0;

 padding:0;

 position:absolute;

 visibility:hidden;

}

#jsddm li ul li a{

 text-align:left;

 padding-left:10px;

 background:#A9C251;

}

#jsddm li ul li a:hover{

 background:#393;

}
 <script>

var timeout         = 500;

var closetimer  = 0;

var ddmenuitem      = 0;

function jsddm_open()

{ 

    jsddm_canceltimer();

 jsddm_close();

 ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');

}

function jsddm_close()

{ 

  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');

}

function jsddm_timer()

{ 

 closetimer = window.setTimeout(jsddm_close, timeout);

}

function jsddm_canceltimer()

{ 

    if(closetimer)

 { 

     window.clearTimeout(closetimer);

  closetimer = null;

 }

}

$(document).ready(function(){ 

    $('#jsddm > li').bind('mouseover', jsddm_open);

 $('#jsddm > li').bind('mouseout',  jsddm_timer);

 $("#jsddm ul li>a").click(function(){

  $("#jsddm a[id='jsdd']").text($(this).text());

  $("#jsddm a[id='jsdd']").attr("class",$(this).attr("class"));

 });

});

document.onclick = jsddm_close;

</script>

<li><a>菜单</a>
<ul>
<li><a href="">下拉菜单1</a></li>
<li><a href="">下拉菜单1</a></li>
<li><a href="">下拉菜单1</a></li>
</ul>
</li>

用li:hover ul { display:block; position:relative; top:-1px; left:0; }显示下拉，不过这种方法在IE6下有兼容性问题，IE6不支持除A标签之外的其他标签的：hover伪类

纯css是实现不了的，要配合js

扩展阅读：dw行为简单下拉菜单 ... dw中下拉菜单怎么设置 ... 用dw做导航条下拉菜单 ... dwcs6导航栏下拉菜单 ... dw二级下拉式菜单 ... dw下拉菜单的制作 ... dw怎么添加下拉菜单 ... css实现下拉菜单 ... dw下拉菜单怎么设置选项 ...