如何用CSS制作纵向导航菜单？

应用Web标准进行网页制作以后，我们通常用ul无序列表标签来构建菜单。我们以前讨论过很多横向菜单的制作，在前面的文章中，我们讲述了《用“ul+li”及css制作韩国风格菜单》，是一种纵向的导航菜单。我们今天来看另一种纵向导航菜单，我们不断的总结经验、提高编码水平，才能在实际操作中更加的得心应手。
　　我们看下面的XHTML代码：

 代码如下 复制代码
<ul><span>www.111cn.net</span>
 <li><a href="http://www.111cn.net" target="_blank">Div+CSS教程</a></li>
 <li><a href="http://www.111cn.net" target="_blank">CSS布局实例</a></li>
 <li><a href="http://www.111cn.net" target="_blank">CSS在线手册</a></li>
</ul>
<ul><span>www.111cn.net</span>
 <li><a href="http://www.111cn.net" target="_blank">Div+CSS教程</a></li>
 <li><a href="http://www.111cn.net" target="_blank">CSS布局实例</a></li>
 <li><a href="http://www.111cn.net" target="_blank">CSS在线手册</a></li>
</ul>

　　这是两个无序列表，每一个列表中有三个列表项，即是导航菜单的内容。
　　我们用CSS对此进行样式的定义，让它按我们的要求显示出来，我们看下面的CSS代码：

 代码如下 复制代码
*{ padding:0; margin:0; font-size:12px; line-height:1.7; 
font-family:Verdana, "宋体", Arial; list-style:none;}
a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;}
a:hover,a:active{color:#000;background-color: #ADC2F5;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
ul{ background:#fff; width:150px; border:1px solid #06f; 
margin:0px 20px -1px 20px; padding:1px;}
span{ display:block;background:#036; padding-left:13px; color:#fff; }
时间： 2024-09-12 03:12:12

如何用CSS制作纵向导航菜单？的相关文章

CSS技巧分享：如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

CSS网页布局入门教程：纵向导航菜单

核心提示:纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧!  如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#"

CSS实现横向导航菜单

CSS实现横向导航菜单教程,一步一步教你制作.   主题代码部分: <ul id="nav">      <li><a href="http://www.alixixi.com/">CSS趋势</a></li>      <li><a href="http://www.alixixi.com/">CSS教程</a></li>      &l

jQuery纵向导航菜单效果实现方法_jquery

本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $

CSS 制作的三级菜单特效代码

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|http://www.webjx.com/|---CSS 制作的三级菜单</title> <style type="text/css"> <!-- body { font-fami

纯CSS制作二级导航

原文:纯CSS制作二级导航 一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一个竖向的ul. 1 <ul id="nav_ul"> 2 <li> 3 <a href="#">首页</a> 4 <ul class="nav_ul_ul"> 5

纯CSS横向二级导航菜单代码

提示:您可以先修改部分代码再运行 纯CSS横向二级导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

纯css+div经典导航菜单代码

提示:您可以先修改部分代码再运行 纯css+div经典导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

JavaScript脚本制作二级导航菜单

网页特效脚本制作二级导航菜单      相信对于二级导航菜单大部分朋友都不会陌生,因为大部分网站都有用到.但是二级导航菜单是如何实现的,我想大部分朋友还和zero一样一头雾水.不过没关系通过下面的实例,你和我都能解决这个问题.      2.1.在网页中适当的位置添加一个一级菜单,本例中的一级导航菜单是由一系列空的超级链接组成,这些空的超级链接执行的操作是调用自定义的javascript函数lmenu()显示对应的二级菜单,在调用时需要传递一个标记,即主菜单项的参数.      2.2.在网页中