微软风格的CSS横向菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平导航菜单(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
padding: 0px;
margin: 5px;
text-align: center;
font-size: 12px;
}
#nav{
height: 44px;
width: 425px;
background: #FFF;
margin:10px auto;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color:  #666;
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color:  #7C8DD9;
border-top: 4px solid #7C8DD9;
}
</style>
</head>
<body><div id="nav"><ul><li><a href="http://www.js323.com">产品介绍</a></li><li class="vline"></li>
<li><a href="http://www.sjzlixing.com">石家庄拓展</a></li><li class="vline"></li>
<li><a href="#">联系我们</a></li><li class="vline"></li>
<li><a href="#">新闻中心</a></li><li class="vline"></li>
<li><a href="#">公司简介</a></li><li class="vline"></li>
</ul></div>
</body>
</html>
时间: 2024-10-15 12:29:28

微软风格的CSS横向菜单的相关文章

CSS - 横向菜单

CSS: .menu{ box-sizing: border-box; width: 100%; white-space: nowrap; white-space: nowrap; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: .5rem 0; } .menu ul, .menu ul li { position: relati

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

顶 企业站常用css横向导航菜单

<!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</a>" lang="zh-CN"><head><m

一款灰色风格的Css滑出菜单

<!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-

CSS导航菜单简单示例

1.纵向菜单 纵向菜单代码示例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>纵向导航菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } nav{ width: 150px; margin: 50p

制作横向菜单

所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏. <!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&

横向菜单效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>横向菜单</title>    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    <sty

[CSS]简易菜单

样式代码: <style type="text/css"> #menu ul { list-style: none; width: 100px; text-align: center; } #menu ul li { /*float: left;*/ padding: 10px; margin: 2px; background-color: aquamarine; color: yellow; } #menu ul li a { text-decoration: none;

2 纯CSS的菜单

使用纯CSS实现菜单的原理:将下拉框隐藏,当鼠标在菜单时显示隐藏的菜单. html代码: <nav> <ul> <li> <a>菜单1</a> <ul> 子菜单.... </ul> </li> </ul> </nav> 核心CSS代码 nav ul li:hover > ul { display: block; } nav li ul { display: none; positi