几个简单的css实现菜单

最新推荐文章于 2024-05-23 13:03:42 发布
最新推荐文章于 2024-05-23 13:03:42 发布
阅读量602 收藏
点赞数
分类专栏： jsp 文章标签： css browser menu ie class dropdown

最近折腾布局，上网找了几个菜单，放在这里方便使用。

感谢提供这些源码的同志们！

 

第一个

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<style type="text/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; /* IE6 Bug */ 
border-bottom: 0; 
} 

/* Holly Hack. IE Requirement \*/ 
* html ul li { float: left; height: 1%; } 
* html ul li a { height: 1%; } 
/* End */ 

li:hover ul, li.over ul { display: block; } /* The magic */ 
--> 
</style> 
</head> 

<body> 
<ul id="nav"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a> 
<ul> 
<li><a href="#">History</a></li> 
<li><a href="#">Team</a></li> 
<li><a href="#"></a></li> 
</ul> 
</li> 
<li><a href="#">Services</a> 
<ul> 
<li><a href="#">aspxuexi.com</a></li> 
<li><a href="#">Internet Marketing</a></li> 
<li><a href="#">Hosting</a></li> 
<li><a href="#">Domain Names</a></li> 
<li><a href="#">Broadband</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Us</a> 
<ul> 
<li><a href="#">United Kingdom</a></li> 
<li><a href="#">France</a></li> 
<li><a href="#">USA</a></li> 
<li><a href="#">Australia</a></li> 
</ul> 
</li> 

</ul> 
</body> 
</html>

运行结果

一级菜单竖排，二级菜单右边显示

 

第二个

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<HEAD>
<TITLE> CSS 实现浮动菜单 </TITLE>
<style type="text/css">

ul {
    margin: 0px;
    padding: 0px;
}
ul li {
    float: left;
    display:inline;
    font: 0.9em Arial, Helvetica, sans-serif;
    height: 30px;
    width: 100px;
    list-style: none;
}
ul li a {
    color: #FFF;
    text-decoration: none;
    line-height: 29px;
    width: 91px;
    margin: 0px;
    padding: 0px 0px 0px 8px;
    display: block;
    border-right: solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    background: #808080;
}
ul li ul li { height:25px; }
ul li ul li a {
    background: #666;
    line-height:24px;
}
ul li a:hover { background: #666; }
ul li ul { visibility: hidden; }
ul li:hover ul { visibility: visible; }
ul li ul li a:hover { background: #333; }
</style>
</HEAD>
<body>
<ul>
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单五</a></li>
</ul>

</BODY>
</HTML>

运行结果

一级菜单横排，二级菜单下拉

 

第三个

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title> 
<style> 
/* common styling */ 
/* set up the overall width of the menu div, the font and the margins */ 
.menu { 
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:50px 0; 
} 
/* remove the bullets and set the margin and padding to zero for the unordered list */ 
.menu ul { 
padding:0; 
margin:0; 
list-style-type: none; 
} 
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ 
.menu ul li { 
float:left; 
position:relative; 
} 
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ 
.menu ul li a, .menu ul li a:visited { 
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:30px; 
color:#000; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c9c9a7; 
line-height:30px; 
font-size:11px; 
} 
/* make the dropdown ul invisible */ 
.menu ul li ul { 
display: none; 
} 
/* specific to non IE browsers */ 
/* set the background and foreground color of the main menu li on hover */ 
.menu ul li:hover a { 
color:#fff; 
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li:hover ul { 
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li:hover ul li a { 
display:block; 
background:#faeec7; 
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li:hover ul li a:hover { 
background:#dfc184; 
color:#000; 
} 
</style> 
<!--[if lte IE 6]> 
<style> 
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ 
/* Get rid of any default <span href="tag.php?name=tab" οnclick="tagshow(event)" class="t_tag">tab</span>le style */ 
table { 
border-collapse:collapse; 
margin:0; 
padding:0; 
} 
/* ignore the link used by 'other browsers' */ 
.menu ul li a.hide, .menu ul li a:visited.hide { 
display:none; 
} 
/* set the background and foreground color of the main menu link on hover */ 
.menu ul li a:hover { 
color:#fff; 
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li a:hover ul { 
display:block; 
position:absolute; 
top:32px; 
left:0; 
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li a:hover ul li a { 
background:#faeec7; 
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li a:hover ul li a:hover { 
background:#dfc184; 
color:#000; 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div class="menu"> 
<ul> 
<li><a class="hide" href="../menu/index.html">DEMOS</a> 
<!--[if lte IE 6]> 
<a href="../menu/index.html">DEMOS 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="The zero dollar ads page">zero dollars</a></li>
<li><a href=" http://www.xland.com.cn" title="Wrapping text around images">wrapping text</a></li>
<li><a href=" http://www.xland.com.cn" title="Styling forms">styled form</a></li>
<li><a href=" http://www.xland.com.cn" title="Removing active/focus borders">active focus</a></li>
<li><a href=" http://www.xland.com.cn" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href=" http://www.xland.com.cn" title="Image Map for detailed information">image map</a></li>
<li><a href=" http://www.xland.com.cn" title="fun with background images">fun backgrounds</a></li>
<li><a href=" http://www.xland.com.cn" title="fade-out scrolling">fade scrolling</a></li>
<li><a href=" http://www.xland.com.cn" title="em size images compared">em sized images</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="index.html">MENUS</a> 
<!--[if lte IE 6]> 
<a href="index.html">MENUS 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="a coded list of spies">spies menu</a></li>
<li><a href=" http://www.xland.com.cn" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href=" http://www.xland.com.cn" title="an enlarging unordered list">enlarging list</a></li>
<li><a href=" http://www.xland.com.cn" title="an unordered list with link images">link images</a></li>
<li><a href=" http://www.xland.com.cn" title="non-rectangular links">non-rectangular</a></li>
<li><a href=" http://www.xland.com.cn" title="jigsaw links">jigsaw links</a></li>
<li><a href=" http://www.xland.com.cn" title="circular links">circular links</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 
<!--[if lte IE 6]> 
<a href="../layouts/index.html">LAYOUTS 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="../boxes/index.html">BOXES</a> 
<!--[if lte IE 6]> 
<a href="../boxes/index.html">BOXES 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 
<!--[if lte IE 6]> 
<a href="../mozilla/index.html">MOZILLA 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="../ie/index.html">EXPLORER</a> 
<!--[if lte IE 6]> 
<a href="../ie/index.html">EXPLORER 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
<li><a class="hide" href="../opacity/index.html">OPACITY</a> 
<!--[if lte IE 6]> 
<a href="../opacity/index.html">OPACITY 
<table><tr><td> 
<![endif]--> 
<ul> 
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li>
</ul> 
<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 
</li> 
</ul> 
<!-- clear the floats if required --> 
<div class="clear"> </div> 
</div> 
</body> 
</html>

运行结果

一级菜单横排，二级菜单下拉

xhpJsp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS菜单栏制作
shaonian1996
02-14 6417
1 纵向菜单：html:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;布局&lt;/title&gt; &lt;script type="text/javascript" src="demo.js"&
jQuery+CSS实现简单切换菜单示例
10-21
为了实现菜单的视觉效果，我们还使用了CSS来定义了菜单的样式。通过给"menu1"类定义了边框样式，使得菜单具有统一的外观。"menuTitle"类用于定义每个菜单标题的样式，包括文字居中、边框样式等。针对和元素的样式...
CSS实现常用菜单（一）
bwf_erg的博客
05-03 1065
在写网站的时候，每个网页的导航菜单都是必不可少的，下面我们就把实际开发经常会遇到的菜单总结一下。 1、普通菜单 把鼠标移到菜单内容上，出现二级菜单而且菜单的背景颜色变成深灰色。 （1）使用HTM+CSS来实现 HTML代码如下：   最外层是ul包含5个li,分别是首页，课程大厅，学习中心，经典案例，关于我们。二级菜单也是在当前li下的ul。每个li里面都包含链接a。 CSS
css扇形菜单动画效果
最新发布
前端程序媛_Ying博客
05-23 498
扇形菜单动画效果CSS
精选10款超酷的HTML5/CSS3菜单
weixin_34235371的博客
03-20 442
今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧。 1、CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会...
单纯使用CSS实现下拉菜单
林洪炳的日常技术积累
07-26 3191
教你单纯使用css实现下拉菜单
一个漂亮的CSS菜单
张俊娥
04-24 338
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;m
CSS实现百度百科菜单导航
11-19
总结来说，实现百度百科风格的菜单导航主要涉及以下几个步骤： 1. 创建HTML菜单结构，包括主菜单项和可能的子菜单项。 2. 使用CSS设置菜单的基本样式，如背景色、字体和颜色。 3. 实现菜单项的悬停效果，提供视觉...
不规则背景墙 CSS实现背景图片不规则的导航菜单
12-13
为了实现这样的效果，我们需要以下几个关键CSS属性： 1. **背景图片定位**：`background-position` 属性用于设置背景图片的位置。在案例中，`.nav` 类使用了 `right no-repeat` 来使背景图片从右侧开始，且只显示一...
css三级下拉菜单实现方法分享
09-25
### CSS三级下拉菜单实现方法详解 在网页设计与开发中，导航菜单是不可或缺的一部分，...以上就是使用CSS实现一个三级下拉菜单的具体步骤和细节。通过这种方式，我们可以轻松地为网站添加一个既美观又实用的导航系统。
CSS制作的几款菜单（内嵌样式）
03-31
收录了几款CSS制作的简单的弹出菜单，供我们新手参考学习用。
非常简单实用的jsp实现树型菜单，不臃肿
12-07
非常简单实用的jsp实现树型菜单，实现的代码比较简洁，不臃肿。
css菜单在线生成器
12-27
css菜单在线生成器
20个超漂亮实用的纯CSS web2.0导航菜单模板
12-02
20个超漂亮实用的纯CSS web2.0导航菜单模板
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
07-11
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
网站菜单CSS
weixin_33681778的博客
01-27 110
#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0px solid #9e5ae2;transition-duration:0.6s;}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom...
用css制作各种菜单
thinker28754的专栏
06-20 1507
 横向下拉菜单该文章转载自脚本之家：http://www.jb51.net/html/200701/78/5959.htm"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" lang="zh-CN"> 横向下拉菜单 * {margin:0;padding:0;b
css 简单菜单栏的设置
健康平安的活着的专栏
09-26 2954
1.制作简易 菜单栏选项         .list-box{     border-top: 2px solid #eee;     padding: 10px;     width:200px; } .list-box ul li{     height: 30px;     border: 1px solid #00a7d2;#设置边框的样式     text-al
使用JS+CSS实现Tab菜单切换效果的步骤解析
“js+css实现tab菜单切换效果的方法” 在网页设计中，Tab菜单是一种常见的交互元素，它允许用户在不同的内容区域之间进行切换，而无需刷新整个页面。本资源介绍如何使用JavaScript（js）和层叠样式表（css）来实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值