html导航栏悬浮在最右边

html-css08

html导航栏悬浮在最右边,第1张

首先给导航栏来个float:right即可。

2、其次在html中,右边图片的代码是“imgalign=right”。“对齐”属性用于设置图片元素相对于其他元素的方向。

3、最后当属性值为“右”时,图片元素将显示在右侧。

html做鼠标悬浮菜单上的选项能出现下拉菜单,CSS+JS做出此效果。

<body>内代码为:

<UL id=fm> 

<LI><A href="#">一级菜单栏目</A> 

<UL> 

<LI><A href="#">一级菜单目录</A></LI> 

<LI><A href="#">一级菜单目录</A></LI> 

<LI><A href="#">一级菜单目录</A></LI> 

<LI><A href="#">一级菜单目录</A></LI></UL>

</LI> 

<LI><A href="#">二级菜单栏目</A> 

<UL> 

<LI><A href="#">二级菜单目录</A></LI> 

<LI><A href="#">二级菜单目录</A></LI> 

<LI><A href="#">二级菜单目录</A></LI> 

<LI><A href="#">二级菜单目录</A></LI> 

<LI><A href="#">二级菜单目录</A></LI></UL></LI> 

<LI><A href="#">三级菜单栏目</A> 

<UL> 

<LI><A href="#">三级菜单目录</A></LI> 

<LI><A href="#">三级菜单目录</A></LI> 

<LI><A href="#">三级菜单目录</A></LI> 

<LI><A href="#">三级菜单目录</A></LI>

</UL></LI> 

<LI><A href="#">四级菜单栏目</A> 

<UL> 

<LI><A href="#">四级菜单目录</A></LI> 

<LI><A href="#">四级菜单目录</A></LI> 

<LI><A href="#">四级菜单目录</A></LI> 

<LI><A href="#">四级菜单目录</A></LI></UL></LI> 

</UL></LI></UL>

为了突出效果,做的CSS样式代码为:

<STYLE type=text/css>

*{margin:0padding:0border:0}

#fm { line-height: 24px list-style-type: none background:#666 }/*设置盒子的行高,去掉标记,设置背景颜色*/

#fm a { display: block width: 80px text-align:center }/*设置A标签为块元素不显示,宽度,居中*/

#fm a:link { color:#666 text-decoration:none } /* 设置未访问的链接样式*/

#fm a:visited { color:#666text-decoration:none } /* 设置已访问的链接样式 */

#fm a:hover { color:#FFFtext-decoration:nonefont-weight:bold }  /* 当有鼠标悬停在链接上的颜色 */

#fm li { float: left width: 150px background:#CCC }

#fm li a:hover{ background:#999 }

#fm li ul { line-height: 27px list-style-type: nonetext-align:left left: -999em width: 80px position: absolute }

#fm li ul li{ float: left width: 80px background: #F6F6F6 } 

#fm li ul a{ display: block width: 80pxwidth: 80pxtext-align:leftpadding-left:5px } 

#fm li ul a:link { color:#666 text-decoration:none } 

#fm li ul a:visited { color:#666text-decoration:none } 

#fm li ul a:hover { color:#F3F3F3text-decoration:nonefont-weight:normal background:#C00 } 

#fm li:hover ul { left: auto } 

#fm li.sfhover ul { left: auto } 

#content { clear: left } 

</STYLE>

js代码为:

<SCRIPT type=text/javascript>

function menuFix() { 

var sfEls = document.getElementById("fm").getElementsByTagName("li") 

for (var i=0 i<sfEls.length i++) { 

sfEls[i].onmouseover=function() { 

this.className+=(this.className.length>0? " ": "") + "sfhover" 

sfEls[i].onMouseDown=function() { 

this.className+=(this.className.length>0? " ": "") + "sfhover" 

sfEls[i].onMouseUp=function() { 

this.className+=(this.className.length>0? " ": "") + "sfhover" 

sfEls[i].onmouseout=function() { 

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"") 

window.onload=menuFix 

</SCRIPT>

最后的效果图为:

以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。