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类，而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 个解决方案

解决方案1
1 已采纳 2016-08-31 14:09:32

CSS下拉菜单不在dojo dijit.layout.ContentPane中浮动

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-31 14:09:32

解决方案1
1 已采纳 2016-08-31 14:09:32