css dojo 中的下拉菜单不浮动 dijit.layout.ContentPane

Question

css 下拉菜单是以下位置的变体：

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

当放置在 dijit.layout.ContentPane 内时，会出现滚动条而不是浮动。

我已经追踪到这个文件的错误：

<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">

但是我看不出原因。

下面是代码。

<!-- File: css/dropdown.css-->
    ul.dbtul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li.dbtli {
        float: left;
    }

    li.dbtli a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li.dbtli a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        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;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

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

 <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">              
        
        <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">         
     <style type="text/css">  
         html, body { height: 100%; }     
     </style>    
     <link rel="stylesheet" type="text/css" href="css/dropdown.css"/> 

        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>     
        <script>
         var dojoConfig = {       
             parseOnLoad: true
         }
         require([ 
         'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],  
         function(BorderContainer, ContentPane, parser) { 
          parser.parse();
         });          
        </script>       
    </head>

    <body class="claro" style="font-family: Verdana; font-size: 11px;"  >           
     <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">               
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">                    
          <a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> &lt;&lt; Volver a p&aacute;gina anterior</a>      
          <div >
           <ul class="dbtul">
            <li class="dbtli"><a class="active" href="#home">Home</a></li>
            <li class="dbtli"><a href="#news">News</a></li>
            <li class="dropdown">
             <a href="#" class="dropbtn">123456</a>
             <div class="dropdown-content">
                 <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                 <a href="#">Link 3</a>
             </div>
            </li>
        </ul>
          </div>
         </div>   
       </div>          
    </body>
</html>

Answer 1

这是 BorderContainer 布局的结果，它为 ContentPane 设置了固定高度 div。此 div 具有 dijitContentPane class 并且 claro.css 具有以下声明：

.dijitContentPane {
    display: block;
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}

您可以将溢出覆盖为可见，您的示例将起作用，但是当您将其他元素添加到容器时，您可能运行出现布局问题。我建议只使用 dijit MenuBar 代替：https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html

css dojo 中的下拉菜单不浮动 dijit.layout.ContentPane

css dropdown menu not floating in dojo dijit.layout.ContentPane

css

dojo

drop-down-menu