个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我是 HTML 和 CSS 的新手。
我正在尝试制作一个带有下拉菜单的导航栏。
我创建了导航栏。但是主菜单项的宽度随着子菜单项的变化而变化。
如何停止更改主菜单项的宽度。这里的主菜单项是“学校”。
我不想改变 SCHOOLING 的宽度。
变更前
变更后
导航栏的html代码
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav id="navbar" class="bold">
<ul>
<li style="border-top-left-radius:10px;border-bottom-left-radius:10px;"><a href="index.html" style="padding-left:21px;">HOME</a></li>
<li><a href="subject.html" >SCHOOLING</a>
<ul>
<li><a href="#">HIGH SCHOOL</a></li>
<li><a href="#">HIGHER SECONDARY</a></li>
</ul>
</li>
<li><a href="subject.html">ENGINEERING</a></li>
<li><a href="subject.html">UG | PG</a></li>
<li><a href="subject.html">SPECIAL CLASSES</a></li>
<li><a href="about.html">ABOUT</a></li>
<li style="border-right:none;"><a href="contact.html">CONTACT US</a></li>
</ul>
</nav>
</body>
</html>
导航栏的 CSS 代码
* {
margin: 0;
padding: 0;
font-family: Courier New, monospace;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
.bold {
font-weight: bold;
}
/* NAV BAR */
#navbar {
background-color: #333;
margin:10px;
height: 40px;
color: white;
border-radius: 10px;
}
#navbar ul {
list-style: none;
overflow: hidden;
}
#navbar ul li {
float: left;
border-right: 2px solid #dede0e;
font-size: 1.5em;
}
#navbar ul li a {
color: white;
display: block;
text-decoration: none;
padding: 6px 10px;
}
#navbar ul li:hover {
background-color: #000000;
}
/* DROP DOWN MENU */
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
}
#navbar ul ul li {
float: none;
font-size: 1em;
border: none;
position: relative;
top: 100%;
left: 0;
}
#navbar ul ul li a {
border-right: none;
padding: 0 20px;
}
#navbar ul li:hover > ul
{
display: block;
}
最佳答案
您可以通过将下拉菜单的位置设置为绝对位置来实现这一点。
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
position: absolute;
}
关于html - 如何在不更改主菜单项宽度的情况下制作下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35729677/
25
4
0
我正在创建一个项目来使用评级系统评估不同的产品，但由于我是新手，所以我有几个问题。 首先，为了实现这个目标，我创建了一个 ListView ，它允许我使用从该数据库获取的 JSON 代码显示 MySQ
在对学校的大型作业进行故障排除时，我发现了一个错误，我将单个项目列表(包含一个项目的堆栈)视为单个项目。我解决了我的问题，但是在进一步的测试中我注意到一些奇怪的事情: 48 ?- 1 is [1].
嘿，我正在修改我在 Internet 上找到的示例应用程序。 (学习2破解)我想在我的 ReclycerView 中获取单行的 ID。这是代码。 主要 private void initVie
我在一个项目中使用 ASP.NET MVC SiteMap 提供程序，它运行良好。但是，我很难弄清楚如何隐藏菜单项。我想在全局导航中隐藏的菜单项是我的“站点地图”页面。现在我知道有一个东西叫做 Vis
我是一名优秀的程序员,十分优秀！