个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在我当前的简单导航菜单栏上创建子菜单。当我将鼠标悬停在“治疗”的导航链接上时，子菜单项很好地下降并位于上述链接的中央，但背景颜色分布在整个容器中(与完整导航栏的宽度相同)。我想要的是子菜单以与上面的“治疗”链接相同的宽度下拉到下方。我在下面添加了代码片段，供人们查看我哪里出错了。
@charset"UTF-8";
nav {
font-size: 20px;
text-transform: uppercase;
background-color: #1C75BC;
color: white;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav li {
float: left;
width: 20%;
}
nav a:link,
nav a:visited {
display: block;
color: white;
background-color: #1C75BC;
text-align: center;
padding: 8px;
text-decoration: none;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
/* Safari */
-moz-transition: all 0.3s ease-in;
/* Firefox */
-o-transition: all 0.3s ease-in;
/* Opera */
}
nav a:hover {
background-color: #4dacff;
}
nav ul ul {
display: none;
font-size: 10px;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
width: auto;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
<nav>
<ul>
<li><a href="http://www.leftyslaser.co.uk">Home</a>
</li>
<li><a href="http://www.leftyslaser.co.uk/faq.html">FAQ</a>
</li>
<li><a href="http://www.leftyslaser.co.uk/portfolio.html">Portfolio</a>
</li>
<li><a href="#">Treatments</a>
<ul>
<li><a href="#">Laser Tattoo Removal</a>
</li>
<li><a href="#">Carbon Facial Skin Rejuvenation</a>
</li>
</ul>
</li>
<li><a href="http://www.leftyslaser.co.uk/about.html">About Us</a>
</li>
</ul>
</nav>
</body>最佳答案
使用inline-block 代替block。使用 display: block 使元素显示在整个浏览器中。
nav ul li:hover > ul {
display: inline-block;
}
关于html - 导航子菜单链接列出容器的全宽，而不是它们嵌套的菜单项的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29419186/
25
4
0
如何从单个输入字段中的逗号分隔值输出列表(无论是作为单个值还是作为数组)？ 示例 用户在文本输入字段中输入以下内容:Steve、Bruce、Matt、Natasha、Peter 结果: 史蒂夫 布鲁斯
如何列出与 Jena 中的实例关联的所有对象属性？ 例如:Person 有一个名为“hasVehicle”的对象属性，它与类 Vehicle 相关联 最佳答案 合适的 Jena 方法是 OntClas
如何列出与 Jena 中的实例关联的所有对象属性？ 例如:Person 有一个名为“hasVehicle”的对象属性，它与类 Vehicle 相关联 最佳答案 合适的 Jena 方法是 OntClas
我知道 Python 是一种动态语言，但下面的代码让我很困扰。 我有下面的简单程序，它有一些辅助函数来包装命令执行。 EventLoaderToVerticaHelper 是一个有两个方法的辅助类，所
我有以下代码 public void saveProjects(List proj) throws DatabaseException { for (Project listItems: pr
我有一个列表，其中元素是: struct element { double priority; int value;
我看到对于 pull 请求的提交，根据文档最大限制为 250:List commits on a Pull Request如果 pull 请求超过 250 次提交，则建议使用另一个端点:List Co
我是 django 的新手，我想列出一个 django 项目的应用程序，例如: FeinCMS 我知道 startapp 会为应用程序创建目录结构。请问有没有函数或者文件可以获取应用列表。 以Fein
你能列出所有在 Hibernate 框架中使用的设计模式吗？ 我了解一些设计模式，如 DAO、ORM 等。 如果可能的话，一些例子。 最佳答案 Hibernate 中使用的设计模式: 领域模型模式——
我正在尝试在终端中使用 psql 来查找数据库中所有可为空的列。如果我使用 select * from information_schema.check_constraints; 我得到如下信息 c
您可以使用以下步骤列出 WSO2 碳基产品使用的所有管理服务。 使用 OSGI 控制台启动服务器。转至 /bin 使用命令 shell 。 i) 例如:Linux sh wso2server.s
我想列出数据库中的所有表名。我的应用程序必须独立于 DBMS。不同的 DBMS 有不同的命令来列出表，例如: PstgreSQL: SELECT * FROM pg_catalog.pg_table
主要是为了我自己的启发，我试图列出当前 Emacs session 中加载的所有全局变量。我正在考虑做的是生成一个包含所有列出的功能的 HTML 文件。当然，定义函数、var 等的文件也很有用。 em
我如何定义 lists:append具有列表理解功能？ 我想要类似的东西 1> append([[1, 2, 3], [a, b], [4, 5, 6]]). [1,2,3,a,b,4,5,6] 最佳
使用以下 Powershell 代码段，我可以获取当前用户的组成员名称: $groups = [System.Security.Principal.WindowsIdentity]::GetCurre
如何列出 Docker 容器的所有卷？我知道它应该很容易获得，但我找不到方法。 另外，是否可以获取已删除容器的卷并将其删除？ 最佳答案 您可以使用 docker ps，获取容器 ID 并写入: $ d
来自微软独库: The "\\.\" prefix will access the Win32 device namespace instead of the Win32 file namespace
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: Finding all Namespaces in an assembly using Reflection (Do
是否有命令行选项可以列出您的 Cucumber 测试套件中的所有标签？ 例如，我想要这样的东西: cucumber --show-tags foo.feature 那会给我类似的东西: @ci @de
有没有一种快速的方法来列出为数据库定义的所有实际上没有被任何字段使用的 Firebird 域？我有一个包含许多表和许多域的大型数据库，似乎其中很多不再使用，所以我想是时候进行清理了! 我认为这可以通过
我是一名优秀的程序员,十分优秀！