所以我的导航菜单有问题。我有 5 个链接，其中一个链接需要下拉菜单。当我将鼠标悬停在下拉菜单上时，整个导航栏会下降，将其他链接拖动到与下拉元素相同的级别。我一直在绞尽脑汁想弄清楚是什么原因造成的。我不认为这是一个 jQuery 问题，而是与 CSS 相关。任何指导将不胜感激。
HTML
.........
<script type = "text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" src="js/dropdown.js"></script>
</head>
<body>
<div id="bodypage">
<nav id = "navbar">
<ul>
<li id= "listheader"><a href="index.php">Students Journal</a></li>
<li><a href="index.php">Blog</a></li>
<li><a href="aboutme.php">About Me</a></li>
<li><a href="#">Topics</a>
<ul>
<li>Coming Soon</li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<div id="wrapper">
<section id = "mainsection">
.........
CSS
.......
#navbar{
background:#303030;
line-height:30px
}
#navbar ul li li{
background-color:#EE7621;
display:none;
z-index: 1000;
}
#navbar li{
display:inline-block;
list-style:none;
font-weight:normal;
font-family: 'Lora', serif;
}
#listheader{
background-color:#EE7621;
color:white;
font-size: 1.5em;
}
#navbar a{
padding:1.250em 4.231em 1.250em 4.231em;
display:inline-block;
list-style:none;
color:#F5F5F5;
}
#listheader a{
padding: 0.7em 4em .85em 4em;
}
#navbar a:hover{
color:#EE7621;
}
#listheader a:hover{
color:#FFF;
}
.......
jQuery
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().fadeToggle(100);
});
});
最佳答案
您的下拉子菜单必须绝对定位(相对于它的父级)。
尝试将您的 CSS 更改为以下内容:
#navbar ul > li {
position: relative;
display:inline-block;
list-style:none;
font-weight:normal;
font-family: 'Lora', serif;
}
#navbar ul > li > ul > li {
position: absolute;
left:25%;
bottom: -10px;
}
关于html - CSS 问题导致整个导航栏下拉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18517639/