- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我制作的这个导航栏在某些按钮上有下拉菜单。我想这样做,当激活下拉菜单的按钮悬停在上方时,下拉菜单会像这样下降到位:http://designmodo.com/demo/css3dropdownmenu/
这是我的代码的链接:http://jsfiddle.net/w5Ce7/2/
这里是刚刚粘贴的代码:
HTML
<div id="container">
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Questions</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Designer</a></li>
<li><a href="#">Flavors</a></li>
<li><a href="#">Cakes</a>
<ul>
<li ><a href="#">Budget Cakes</a></li>
<li><a href="#">Wedding</a>
<ul>
<li><a href="#">Wedding 1</a></li>
<li><a href="#">Wedding 2</a></li>
<li><a href="#">Wedding 3</a></li>
<li><a href="#">Wedding 4</a></li>
<li><a href="#">Wedding 5</a></li>
<li><a href="#">Wedding 6</a></li>
</ul>
</li>
<li ><a href="#">Cakes to Go</a></li>
<li ><a href="#">Cake Bonbons</a></li>
<li ><a href="#">Holiday Cakes</a></li>
<li ><a href="#">Cakes for Girls</a></li>
<li ><a href="#">Cakes for Boys</a></li>
<li ><a href="#">For Her</a></li>
<li ><a href="#">For Him</a></li>
<li ><a href="#">Cupcakes</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Beach Wedding</a></li>
<li><a href="#">Baby Showers</a></li>
<li><a href="#">Sweet 15-16</a></li>
</ul>
</li>
</ul>
</div><!--end of navbar-->
CSS
body {
margin:0;
font-family:Georgia, Arial black, Times, serif;
}
h2 {
text-align:center;
}
img {
border:none;
border:0;
}
#topbanner {
width:100%;
height:40px;
background-color:#88C6CC;
color:#fff;
text-align:center;
line-height:40px;
font-size:36px;
}
#container {
width:1050px;
height:800px;
background-color:#B7E6E8;
margin:auto;
position:relative;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
margin-top:10px;
}
/*Start Navigation Bar*/
#navbar ul ul {
display:none;
}
#navbar ul li:hover > ul {
display:block;
}
#navbar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 40px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
list-style:none;
position:relative;
display:inline-table;
}
#navbar ul:after {
content: ""; clear: both; display: block;
}
#navbar ul li {
float:left;
-webkit-transition:background 0.3s ease-in;
-moz-transition:background 0.3s ease-in;
-o-transition:background 0.3s ease-in;
-ms-transition:background 0.3s ease-in;
transition:background 0.3s ease-in;
}
#navbar ul li:hover {
background:#4b545f;
}
#navbar ul li:hover a {
color:#fff;
}
#navbar ul li a {
display:block;
padding:25px 40px;
color:#757575;
text-decoration:none;
}
#navbar ul ul {
background: #5f6975;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
padding: 0;
position:absolute;
top:100%;
width:195px;
z-index:1;
}
#navbar ul ul li {
float:none;
border-top:1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position:relative;
}
#navbar ul ul li a {
padding: 15px 40px;
color:#fff;
}
#navbar ul ul li a:hover {
background: #4b545f;
}
#navbar {
text-align:center;
}
#navbar ul ul ul {
position:absolute;
left:100%;
top:0;
width:155px;
}
最佳答案
给你。 <强> FIDDLE 。问题是将子 ul 显示为 block 。
#navbar ul li:hover > ul {
opacity:1;
height:auto !Important;
}
#navbar ul li:hover > ul > li {
height:50px !important;
opacity:1;
}
#navbar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 40px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
list-style:none;
position:relative;
display:inline-table;
}
#navbar ul:after {
content:"";
clear: both;
display: block;
}
#navbar ul li {
float:left;
-webkit-transition:background 0.3s ease-in;
-moz-transition:background 0.3s ease-in;
-o-transition:background 0.3s ease-in;
-ms-transition:background 0.3s ease-in;
transition:background 0.3s ease-in;
position:relative;
}
#navbar ul li:hover {
background:#4b545f;
}
#navbar ul li:hover a {
color:#fff;
}
#navbar ul li a {
display:block;
padding:25px 40px;
color:#757575;
text-decoration:none;
}
#navbar ul ul {
background: #5f6975;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
padding: 0;
position:absolute;
top:100%;
left:0px;
width:195px;
z-index:1;
-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
opacity:0;
height:0px;
}
#navbar ul ul li {
float:none;
border-top:1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position:relative;
height:0px;
-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
opacity:0;
}
#navbar ul ul li a {
padding: 15px 40px;
color:#fff;
}
#navbar ul ul li a:hover {
background: #4b545f;
}
#navbar {
text-align:center;
}
#navbar ul ul ul {
position:absolute;
left:100%;
top:0;
width:155px;
}
关于html - 我如何将此下拉菜单实际设置为 "drop down",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22236395/
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
我想对包含其部分内容的文本字段执行简单搜索,但我不知道从哪里开始。我基本上想要人们对“包含搜索”的期望。如果我在 issue 中搜索 345 ,我会想要这个结果: 123456 234567 3456
我在 VBE 的 C# 插件中有这段代码(强调“VBE”:它不是 MS-Office 插件): public abstract class HostApplicationBase : IHostApp
我有一个 ImageView,它显示来自资源的图像。ImageView 的宽度是固定的 (60dp)。高度设置为 wrap_content。调整图像大小以适合此宽度(节省宽高比 - 这很完美) 问题是
我正在建立一个网站,但遇到了一个问题:谷歌浏览器开发者工具中的背景以较低/较高的分辨率延伸。当我直接从手机打开网站时,背景不适合屏幕,只是“剪切”了背景。 这是网站:https://feargames
好吧,首先,这是 HTML 模板: ... ... ... ... 如您所见,页面位于标题下方,并且通过 JS 代码可见
我读到了 BK-trees (Burkhard-Keller-Trees) 几个月前,据说这是一种保存您想通过距离度量再次读取的内容的好方法。因此,在每种情况下,您都希望通过相似性检索某些内容。 然而
在 python 中,很容易根据字符数用空格填充字符串。例如: print "aaa".ljust(10) + "end" print "www".ljust(10) + "end" 输出是: aaa
我的问题不是特定于编程语言的,而是更通用的问题,以了解人们的思维方式。 通常在大型开发公司中,每项工作都有特定的角色,例如程序员和架构师。因此架构师的观点是拥有完美的架构师和解决方案设计,另一方面程序
我想将数据传递给 then 方法,但是当我通过给它 this.passedResolve 来执行此操作时,它会得到 undefined function Promises(callback){
我希望使用 Erlang/Elixir 在金融市场创建一个平台即服务。我将在金融市场提供 AWS lambda 风格的函数,但我计划向客户分发我自己的基于 ARM 的硬件终端(基于 Nvidia Je
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我已经看到很多代码,这些代码使用Runnable的循环时间来实现某些计时器/超时。问题是,如果有人决定更改此Runnable的循环时间,则计时器将不正确。 例: #define FOO_TIMER_1
当我将 WPF DataGrid 的 ColumnHeaderHeight 设置为 Auto (double.NaN) 时,如何获取列标题的实际呈现高度? 我似乎无法在 DataGrid 类中找到该属
目前最实用的png修复方法是什么?轻量级,支持背景重复和背景位置。 最佳答案 IE7.JS在我看来: IE7.js is a JavaScript library to make Microsoft
我已经进行了长时间的搜索并尝试了常见的嫌疑人,但现在是寻求帮助的时候了。 我的 Android Activity 非常愉快地从 SQLite 加载 EditText、Spinner 和 CheckBo
因此,我在 MySQL 全文中创建精确搜索时遇到了一些困难。 在我的数据库中,我正在尝试查找标题中包含特定关键字的职位。 所以我可以尝试 WHERE MATCH(jobTitle) AGAINST (
我正在尝试将 JavaScript 包含到一个表单应用程序中,该应用程序从现场收集施工数据。我已经用谷歌搜索了这个废话,但我无法弄清楚将 html 元素保存在数组中是否合法(或者我的语法是否正确)。
我知道有六种方法可以获取 session.save_path 指令的值(phpinfo()、session_save_path()等),但当值为空字符串时(默认情况下为空字符串),实际路径可以是多个位
我知道 npm 库在安装时可以在分层树中安装同一库的多个版本,如下所示: a@0.1.0 -> b@1.0 -> c@2.0 -> b@2.0 在上面,版本0.1.0的包a被拉入
我是一名优秀的程序员,十分优秀!