Css之导航栏下拉菜单

顺晟科技

2022-09-15 21:09:08

278

Css:

/*下拉菜单学习-2017.12.17 20:17 added by ldb*/

  ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#333;
        /*固定在顶部*/
    /*position:fixed;
    top:0;
    width:100%;*/
  }
  
  li{
    float:left;
  }
  
  li a, .dropbtn
  {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
  }
  
  li a:hover, .dropdown:hover .bropbtn/*/* 当下拉内容显示后修改下拉按钮的背景颜色 */
  {
    background-color:#111;
  }
  
  /* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    /*position: relative;*/
    display: inline-block;
}
  
  .dropdown-content
  {
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /*下拉菜单内容样式*/
  .dropdown-content a
  {
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /*鼠标悬停在.dropdown元素上时，其下面的元素以块的样式展现出来*/
  .dropdown:hover .dropdown-content
  {
    display:block;
  }

Html:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>@*应用自己下好的jQuery,也可以引用百度(src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)或者微软CDN*@
    <link href="../Content/ldbCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@
    <link href="../Content/ButtonCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@
    <title>Index</title>
</head>
<body>
   
    <ul>
        <li><a href="#product">生产管理</a></li>
        <li><a href="#javascript()">工艺管理</a></li>
        <li><a href="#javascritp()">成品管理</a></li>

        <div class="dropdown">
            <li><a class="dropbtn" href="~/Views/Home/myHtmlCss.cshtml">进销存</a></li>
            <div class="dropdown-content">
                <a href="#">坯布</a>
                <a href="#">染化料</a>
                <a href="#">五金件</a>
            </div>
        </div>
                      
        <li><a href="#">设置</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
        <h1>Fixed Top Navigation Bar(下拉菜单)</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>下拉菜单</h2>


    </div>
</body>
</html>

效果：

上一篇：CSS 下拉菜单：如何制作下拉菜单下一篇：CSS打造全兼容（IE6、IE7、F