悬浮左侧导航栏html js + css实现左侧悬浮导航栏

浮在页面上的导航菜单

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px; /* Set 1px less than menu width */

top: 0;

display: none;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc;

border-bottom: 0;

}

/* Fix IE. Hide from IE Mac /*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

-->

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px; /* Set 1px less than menu width */

top: 0;

display: none;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc;

border-bottom: 0;

}

/* Fix IE. Hide from IE Mac /*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

style="left: 10; position: absolute; top: 94; z-index: 5; width: 221; height: 293">

网站首页网页特效广告代码您自定义您自定义您自定义您自定义您自定义您自定义您自定义您自定义您自定义您自定义您自定义

如果觉得《悬浮左侧导航栏html js + css实现左侧悬浮导航栏》对你有帮助，请点赞、收藏，并留下你的观点哦！