除了一个我无法解决的小错误之外,我的下拉菜单运行正常。
第一个下拉菜单项正常显示。但是,第二个下拉菜单项稍微向右移动。我猜我设置为链接的右边距导致下拉菜单稍微向右移动。如果是这种情况,我该怎么办才能解决该问题?
这是一个简单的导航菜单,将下拉菜单项的位置设置为绝对,并被父元素的overflow:hidden功能隐藏。悬停时,下拉菜单以overflow:visible进入视图。
实时站点在这里->导航菜单
的CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
的HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<a href="#mainMenu" class="showMenu"></a>
<a href="#" class="hideMenu"></a>
<ul>
<li><a href="About">About</a>
<ul>
<li class="company"><a href="#">Company Profile</a></li><li class="team">
<a href="#">The Team</a></li><li class="linsux">
<a href="#">Pricing Packages</a></li>
</ul></li>
<li><a href="Services">Services</a>
<ul>
<li class="webDesign"><a href="#">Websites</a></li><li class="Emails">
<a href="#">Landing Pages</a></li><li class="Logos">
<a href="#">Logos</a></li>
</ul></li>
</li>
<li><a href="Case Studies">Case Studies</a></li><li>
<a href="Blog">Blog</a></li><li>
<a href="Contact">Contact</a></li><li>
<a href="Free Web Analysis">Free Web Analysis</a></li>
</ul>
</div>
</div>
这是因为您习惯于缩进%
父宽度的子菜单,而这是不一样的。margin-left: -3em
是一个常数。
使用例如:
left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;
不知道为什么要缩进,60%
然后使用将子菜单移回-3em
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句