我无法解决我的 NAV 菜单中的变化。菜单基于 CSS 和 HTML。问题 1 > 将鼠标悬停在标题 1 到 4 上会导致向右的任何标题略微向右移动。我该如何阻止它？ Issue 2 > 将鼠标悬停在 Header4 上会显示一个最初看起来不错的子菜单。但是，当您将鼠标悬停在子菜单上时，焦点项会比其他子菜单项大，因此看起来很草率。我该如何纠正这个问题？问题 3 > 当悬停在子菜单上时，设置菜单的子菜单(最后一个菜单项)的宽度会扩大。无论是否悬停，我都希望它具有相同的宽度。如何？也许与 #2 的答案相同。
最后，我希望得到一些反馈。这个 NAV 的原始 CSS 对我来说似乎很直接。当我观察到需要“调整”的东西时，我在这里添加了一个调整，在那里添加了一个，在那里又添加了一个，直到现在它似乎完全令人费解。这很常见，还是我只是用糟糕的调整把事情搞砸了？感谢您的帮助。
CSS:
/* NAVIGATION */
#menu{
padding 0;
margin: 0;
}
.nav{
margin: 0;
padding: 0;
}
.nav ul{
padding: 0;
background-color: #003366;
}
.nav ul li{
display: inline-block; /*added*/
padding: 10px 22px 10px;
border-right: 1px solid #dadada;
position: relative;
background-color: #003366;
}
.nav ul li:hover{
background-color: #336699;
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
}
.nav ul li:hover ul{
display: block;
position: absolute;
}
.nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul{
display: none;
left: 0px;
/*width: 403px;*/
margin-top: 10px;
padding-top: 0px;
box-shadow: 0px 1px 1px rgba(85, 85, 85, 0.75);
border-top: 1px solid #dadada;
}
.nav ul li ul li{
width: 143px;
border-bottom: 1px solid #dadada;
background-color: #336699;
}
.nav ul li ul li:hover{
background-color: #FFF8DC;
left: 0px;
}
.nav ul li ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul li:hover a{
color: #000;
}
#settings {
padding: 6px 22px;
/*vertical-align:middle;*/
float:right;
border-right:none;
}
#settings:hover {
padding: 6px 18px;
}
#settings > ul {
position: absolute;
left: -124px;
top: 27px;
}
网页:
<?php
$access = 0
?>
<html>
<head>
<title>Nav</title>
<link rel="stylesheet" href="basicnav2.css"/>
</head>
<body>
<div id="menu">
<nav class="nav">
<ul>
<li>
<a href="#">Heading1</a>
</li>
<li>
<a href="#">Heading2</a>
</li>
<li>
<a href="#">Heading3</a>
</li>
<li>
<a href="#">Heading4</a>
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
<li>
</ul>
<li>
<a href="#">Heading5</a>
</li>
<?php
if ($access < 2)
{ ?>
<li id="settings">
<a href="#"><img src="images/settings.png" alt="Settings" height="25" width="25"></a>
<ul id ="settings ul">
<li>
<a href="#">Logout</a>
</li>
</ul>
</li>
<?php
} ?>
</ul>
</nav>
</div>
<div id="textarea">
<p>This is sample text.</p>
</div>
</body>
</html>
最佳答案
你这部分代码是什么原因:
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
删除它似乎解决了我这边的问题。
关于html - 解决 CSS 导航菜单中的偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25477311/