用CSS实现水平方向菜单&竖直方向菜单&下拉菜单

最新推荐文章于 2024-08-05 22:52:29 发布

liangxz0311

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量5.9k

点赞数 3

分类专栏： CSS 文章标签：下拉菜单菜单 css html 导航

本文链接：https://blog.csdn.net/liangxz0311/article/details/44732913

版权

本文介绍了使用CSS创建水平菜单、垂直菜单以及下拉菜单的方法，通过实例展示CSS在网页导航菜单设计中的应用。后续将详细探讨相关技巧。

摘要由CSDN通过智能技术生成

最近在复习CSS,用CSS做的菜单显示，后面再详解。

<!DOCTYPE html />
<html>
<head>
    <title>纵向菜单</title>
    <style type="text/css">
        *{
    margin:0;padding:0;}
        /*制作横向排列的菜单*/
        #listmenu{
    width:100%;height:200px;background:#cc99ff;}
        #listmenu nav{
    width:150px;margin-top:20px;background:#ffcccc;}
        #nav_left ul{
    list-style-type:none;border:1px solid #cc00ff;border-radius:3px;padding:5px 10px 3px;}
        #nav_left li{
    font-family:楷体;font-size:20px;padding:3px 5px;}
        #nav_left li+li{
    border-top:1px solid #9900ff;}
        #nav_left a{
    color:#660099;display:block;text-align:center;text-decoration:none;}
        #nav_left a:hover{
    color:#006600;}
        #nav_left a:active{
    color:#ff0000;background-color: