Day1-CSS-下拉菜单

一、CSS 下拉菜单　　

　　　　　　　　-----使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1、基本下拉菜单

        鼠标移动到我这！
        

            
菜鸟教程
            
www.runoob.com
        
    

　　

　　

2、创建下拉菜单，并允许用户选取列表中的某一项

   <div class="dropdown">
        <button class="dropbtn">下拉菜单button>
        <div class="dropdown-content">
            <a href="#home">主页a>
            <a href="#home">主页a>
            <a href="#home">主页a>
        div>
    div>

HTML

CSS

扩展：

.dropdown-content {
    right: 0;
}

通过这样可以让这个菜单在左边还是右边的

 

3、碰到图片将显示更大的图片

  <div class="dropdown">
        <img src="../image/view1.jpg" alt="" width="250px" height="250px">
        <div class="dropdown-content">
            <img src="../image/view1.jpg" alt="" width="500px" height="500px">
            <div class="desc">hzy笨蛋！div>
        div>
    div>

CSS

 

4、导航条下拉

<ul>
        <li><a href="#home" class="active">主页a> li>
        <li> <a href="#news">新闻a>li>
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单a>
            <div class="dropdown-content">
                <a href="#">链接1a>
                <a href="#">链接1a>
                <a href="#">链接1a>
            div>
            
        div>
    ul>

css