ydzf.net
当前位置:首页 >> Css 横向二级导航菜单 >>

Css 横向二级导航菜单

百度下CSS BOOKSHELF,第6课就是!

这里有一个js的多级联动下拉菜单 可以自定义位置和样式 比较实用 里面有教程和源码

二级菜单导航最主要的还是定位position.理解了定位的用法,就可以使用css来实现简单的菜单效果.对于低版本的浏览器,则可以使用onMouseover来动态控制当前主导航条目的class.

纯CSS下拉菜单* { margin:0; padding:0;}body { margin:50px 0 0 100px; font:Verdana, Arial, Helvetica, sans-serif;}. menu { width:300px; list-style:none;}.menu li { float:left;

html部分: <ul> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> <li>菜单项4</li> </ul> css部分: ul { list-style:none; } li { float:left; } 这是最基本的方式

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*一二级菜单横向排列*/ ul li{ float: left; } /*二级菜单默认不显示*/ ul li ul{ display: none; } /*一级菜单获得焦点时显示其二级菜单*/

首页打开dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a></li> <li><a href="#">栏目二</a></li> <li><a href="#">栏目三</a></li> <li><a href="#">栏目四</a></li> <li><a

可以使用DreamWeaver制作.

下面的是案例你参考一下,直接新建一个页面放到body里面运行就可以了<style type="text/css">*{margin:0;padding:0;border:0;}body {font-size:12px;}#xiela { line-height: 24px; list-style-type: none; background:#666;}#xiela ol { float: left; width: 80

一级导航 二级导航 二级导航 二级导航 二级导航 *{padding:0;margin:0;}#nav{width:996px;margin:0 auto;margin-top:20px;}ul{list-style:none;}#nav > ul > li{color:#999;float:left;width:120px;padding:10px 5px;font-size:14px;text-align

krfs.net | pxlt.net | xaairways.com | mtwm.net | ntxp.net | 网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com