Я искал это и играл с материалом Z-Axis, но безрезультатно. В принципе, у моей навигационной панели есть подменю, которые появляются под под ним. У этого div есть непрозрачность, которая должна иметь какое-то отношение к ней. Мне нужно, чтобы они отображались над div!Подменю Nav Bar появляется под другим Div
JS Fiddle: http://jsfiddle.net/Peege151/7gGJp/1/
Я бы попросил, чтобы расширить свой браузер таким образом бар нав все на одной линии.
Вот мой HTML код:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" type="text/css" rel="stylesheet" />
<title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
<div id="header">
<div id="searchcontainer">
<div id="searchlinks">
<p><a href="###">Full Suite of Services</a> | <a href="###contact">Contact Us</a></p>
</div>
<div id="searchform">
<form action ="##">
Search Site: <input type="search" style="border-radius: 10px;">
<input type="image" src="images/search.png" style="height:20px; width:20px; position:relative;top:5px;">
</form>
<br>
</div>
</div>
<div id="navbar">
<ul id="nav">
<li> Home </li>
<li>Services
<ul>
<li> Full Suite of Services </li>
</ul>
</li>
<li> <a href="case_studies/index"> Case Studies</a>
<ul>
<li><a href="case_studies/thing1"> Thing1</a> </li>
<li><a href="case_studies/thing2">Thing2 </a> </li>
<li><a href="case_studies/thing3"> Thing3 </a></li>
</ul>
</li>
<li>Partners
<ul>
<li> Guy1</li>
<li> TOP HALF OF NAME!!! OMG </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="division"></div>
<div id="intro" class="overlay">
</div>
<div id="biocontactwrap">
<div id="biotext"></div>
<div id="contact_pat"> </div>
</div>
<div id="quote">
</div>
<?php
// put your code here
?>
</body>
</html>
Вот мой CSS:
/*
Document : style
Created on : Nov 12, 2013, 11:51:06 AM
Author : ShiftedRec
Description:
Purpose of the stylesheet follows.
*/
body {
background-image: url(images/wall1.gif);
width:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
root {
display: block;
}
#header {
height:150px;
width:100%;
clear:both;
overflow:hidden;
}
#searchcontainer{
width:305px;
height:60px;
float:right;
position:relative;bottom:20px;
}
#searchlinks {
clear:right;
float:right;
width:300px;
position:relative;top: 10px; left:80px;
font-size:50%;
}
#searchlinks a{
font-size:50%;
}
#searchform {
float:right;
clear:left;
width:300px;
clear:left;
}
.clear{
clear:both;
}
#navbar {
float:right;
margin-right:10%;
width:50%;
text-align: right;
clear:right;
}
#navbar ul{
padding: 0 10px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#navbar ul li {
position:relative;
display: inline-block
}
#navbar ul ul{
display:none;
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
overflow:visible;
z-index: 4;
}
#navbar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li ul li {
display:block;
}
#navbar li {
display: inline-block;
margin: 10px;
white-space: nowrap;
}
#division {
height:15px;
background-color:#9E0000;
overflow:visible;
}
#intro{
height:200px;
width:100%;
z-index: 1;
}
#biocontactwrap {
width:100%;
height: 600px;
margin-bottom: 10px
}
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: relative;top:300px;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .1); /*can be anything, of course*/
box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
margin-left:15%;
width:40%;
height:100%;
padding:0px;
border: solid blue;
float:left;
}
#contact_pat{
width:25%;
height:100%;
border: solid yellow;
float: right;
margin-right:15%
}
#quote {
width:100%;
background-color:blue;
height: 300px;
}
Большое спасибо, ребята! Пожалуйста будь вежлив. Я нобой!
EDIT Одна проблема вызывает другое!
Причина, по которой я переполнил заголовок, состоял в том, что, хотя у меня была ширина: на 100% была прокрутка в нижней части страницы (горизонт), которая позволила бы мне переходить на пустое место.
Когда у меня переполнение: скрыто; в заголовке, который решил эту проблему, но затем скрыл мои подменю навигационной панели.
Я попытался сделать переполнение-x: скрыто; overflow-y: видимо, но наличие Y-видимого в сочетании с X-скрытым, я думаю, прослушивается, и он просто читается как «авто!».
В любом случае, чтобы иметь как прокрутку NO X, так и скрытый скрытый Y подменю? Спасибо, ребята ..
Ah !! Конечно! Спасибо. Можете ли вы проголосовать? Я ответил. – Peege151
Почему вы не приняли ответ? Это был правильный! – Alexnho
Извините Алекс, сначала он решил проблему, но потом понял, что у меня переполнение: скрыто по причине. - По какой-то причине на моей странице есть горизонтальная полоса прокрутки, которую я хотел удалить. Поэтому я сделал переполнение: скрытый, чтобы исправить эту проблему. Было бы неплохо, если бы я мог сделать overflow-x: hidden, overflow-y: видимо, но это не работает! – Peege151