首页 > 解决方案 > 如何更改下拉(下拉内容)菜单中的标题位置?

问题描述

这是我的第一个项目,想知道如何更改下拉菜单中的标题位置,就像在该站点https://www.developerfusion.com/t/csharp/forum/上一样。当您将光标移到 .NET 上时,您可以看到“技术”和“语言”位于该菜单的左侧,而“最新消息”位于右侧。我正在尝试做同样的事情,但不知道也找不到如何将标题移动到右上角的信息。谢谢你的帮助

这是我的一段代码:

    .dropbtn {
        color: steelblue;
        padding: 6px;
        font-size: 15px;
        border-right: thin;
    }

    .dropdown {
        position: relative;
        display: inline;

    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 420px;
        box-shadow: 0px 8px 56px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: cornflowerblue;
        padding: 8px 15px;
        text-decoration: none;
        display: block;
     }

    .dropdown-content a:hover {
        background-color: steelblue;
        color: white;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: midnightblue;
        color: white;
    }

</style>

<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href=".net" class="dropbtn">.NET</a>
                <div class="dropdown-content">
                    <h5>Languages</h5>
                    <a href="csharp">C#</a>
                    <a href="vb.net">VB.NET</a>
                    <a href="fsharp">F#</a>
                    <h5>Technologies</h5>
                    <a href="azure">Azure</a>                       
                    <a href="asp.net">ASP.NET</a>
                    <ul style="list-style-type: none;">
                        <li><a href="asp ajax">ASP AJAX</a></li>
                        <li><a href="asp mvc">ASP MVC</a></li>
                    </ul>                    
                    <h5>Latest articles</h5>                 
                </div>
            </li>

标签: htmlcss

解决方案


推荐阅读