首页前端开发CSSCss 左侧菜单向右

Css 左侧菜单向右

时间2023-07-28 20:23:02发布访客分类CSS浏览548
导读:CSS 左侧菜单向右/*HTML*/<div class="menu"><ul><li><a href="#">菜单项1</a></li><li><a...

CSS 左侧菜单向右

/*HTML*/div class="menu">
    ul>
    li>
    a href="#">
    菜单项1/a>
    /li>
    li>
    a href="#">
    菜单项2/a>
    /li>
    li>
    a href="#">
    菜单项3/a>
    /li>
    /ul>
    /div>
/*CSS*/.menu {
    float: right;
     /*设置菜单浮动到右边*/width: 200px;
     /*设置菜单宽度*/background-color: #f1f1f1;
 /*设置菜单背景色*/}
.menu ul {
    margin: 0;
    padding: 0;
}
.menu li {
    list-style: none;
 /*取消列表项的默认样式*/}
.menu a {
    display: block;
     /*将链接设置为块级元素*/padding: 10px 15px;
     /*设置链接内边距*/text-decoration: none;
     /*取消链接的下划线*/color: #333;
 /*设置链接颜色*/}
.menu a:hover {
    background-color: #ccc;
     /*设置鼠标悬停时的背景色*/color: #fff;
 /*设置鼠标悬停时的文字颜色*/}
    

以上代码实现了一个简单的向右的菜单,可以根据需要自定义样式。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: Css 左侧菜单向右
本文地址: https://pptw.com/jishu/339465.html
css 嵌套 上边框距离 python 要分号吗

游客 回复需填写必要信息