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类，而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中

1 个答案: