css实现二级菜单




    
    
    
    Document
    



    
  • 星期
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 课程
    • 数学
    • 英语
    • 语文
    • 政治

由上面的实例可以看出,使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时,显示二级菜单的ul标签。

核心代码:

list-style-type:none - 删除圆点。

float:left-向左浮动,保证一级菜单水平显示。

:hover-用于选择鼠标指针浮动在上面的元素。

display:none-隐藏二级的菜单。

display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。

先隐藏二级的菜单,当鼠标移动到一级菜单的li标签时,在显示二级菜单的ul标签。

影藏状态

css实现二级菜单_第1张图片

显示状态

css实现二级菜单_第2张图片

你可能感兴趣的:(css,前端,html)