I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
我试图找到我的问题的答案,虽然有类似的问题,但没有任何事情像我一样跳出来解决我的问题。
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
我正在使用CSS添加一个子菜单,由于某种原因水平子菜单只会出现在正文之外。你可以看到这里发生的一个例子http://jsfiddle.net/sxP94/22/。
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
我需要让子菜单显示在菜单上的Portfolio下。如果有人能帮我弄清楚为什么会这样,我会非常感激。
Here is the code:
这是代码:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="portfolio.html"><span>Portfolio</span></a>
<ul>
<li><a href="boudoir.html">Boudoir</a></li>
<li><a href="babies.html">Babies</a></li>
<li><a href="engagement.html">Engagement</a></li>
<li><a href="wedding.html">Wedding</a></li>
<li><a href="lifestyle.html">Lifestyle</a></li>
<li><a href="family.html">Family</a></li>
<li><a href="grad.html">Grads</a></li>
</ul>
</li>
<li><a href="blog.html"><span>Blog</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
无论何时我更改任何左侧数字,子菜单都会完全停止显示。当我将鼠标悬停在菜单上时,甚至不会出现在身体外部。所以我无法弄清楚如何移动它,因为我尝试的任何东西都会让它完全消失。感谢您抽出宝贵时间阅读本文,并提前感谢您提供的任何帮助。
1 个解决方案
#1
3
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
给位置:相对于子菜单的父级。子菜单给出位置:绝对,因此显示在外面。
.menu_nav ul li {
position: relative;
}
#1
3
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
给位置:相对于子菜单的父级。子菜单给出位置:绝对,因此显示在外面。
.menu_nav ul li {
position: relative;
}