Jump to content
  • 0

выпадающее меню

GstarMax

Asked by GstarMax,

 Share

Question

GstarMax Explorer

GstarMax

Posted
Posted (edited)

Доброе время суток!

Сделал выпадающее меню (html+css), но когда выпадает список, он прячется за фоновой картинкой контента. Как сделать что б меню было сверху?

Все файлы залил на filestore

index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Форсаж</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div class="main-bg">
<div class="bg">
<header>
	 <div class="main">
		 <div class="wrapper">
		 <h1><a href="index.html"></a></h1>
		 </div>
		 <nav>
			 <ul class="menu">
				 <li><a class="active" href="index.html">Home</a></li>
				 <li><a href="about.html">О сайте</a></li>
				 <li>
					 <a href="#">Форсаж</a>
					 <ul>
						 <li><a href="#">Форсаж 6</a></li>
						 <li><a href="#">Форсаж 7</a></li>
					 </ul>
				 </li>
				 <li><a href="repair.html">Repair</a></li>
				 <li><a href="price.html">Price List</a></li>
				 <li><a href="locations.html">Locations</a></li>
			 </ul>
		 </nav>
	 </div><!-- main -->
</header>
<!--==============================content=================================-->
<section id="content">
	 <div class="main">
		 <div class="conteiner">
			 <h2>Добро пожаловать!</h2>
			 <p class="p1">Это сайт фаната серии фильмов "Форсаж". Мне очень нравятся эти фильмы, и я решил присвятить этой теме свой сайт. Если Вы с нетерпением ждете новых частей, то присоеденяйтес - вместе время пройдет быстрей!</p>
			 <div class="line"></div>
			 <p class="p1"> ldfkls lfk lsdfl dl kf
			 sldfk flsdk fl<p>
		 </div>
	 </div>
</section>
<!--==============================footer=================================-->
<footer>
	 <div class="main">
		 Форсаж <span>©</span> 2013
		 <br>
		 Сайт фаната серии "Форсаж"
	 </div>
</footer>
</div><!-- bg -->
</div><!-- main-bg -->
</body>
</html>

style.css


html {width:100%; height:100%;}
body {font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#7f7f7f; min-width:960px; margin:0; padding:0; background-color:#000000;}
.main-bg {width:100%; min-height:100%; background:url(../images/main-bg.jpg) center top repeat-y;}
.bg {width:100%; min-height:100%; background:url(../images/bg.jpg) center top no-repeat;}
.clear {clear:both;}
.wrapper {width:100%; overflow:hidden;}
.main {width:960px; margin:0 auto; padding:0; color:#666666;}
h1 {
float:left;
padding:45px 20px 37px 26px;
}
h1 a {
display:block;
width:220px;
height:50px;
background:url(../images/logo.png) 0 0 no-repeat;
}
nav {
height:52px;
width:100%;
background:url(../images/menu-bg.png) 0 0 no-repeat;
margin-bottom:28px;
z-index:500;
}
.menu {list-style:none;}
.menu li {
float:left;
background:url(../images/menu-spacer.gif) left top no-repeat;
position:relative;
}
.menu li:first-child {background:none;}
.menu li a {
display:inline-block;
text-decoration:none;
line-height:25px;
padding:12px 28px 12px 29px;
font-size:18px;
color:#808080;
}
.menu li a.active, .menu li a:hover {color:#fff;}
.menu li:first-child a.active, .menu li:first-child a:hover {background-position:center 15px;}
/*** выпадающие пкнкты */
.menu ul {
position:absolute;
left:-9999px;
list-style:none;
}
.menu ul li {
}
.menu ul a {
white-space:nowrap;
display:block;
}
.menu li:hover ul {
left:0;
}
/***** content *****/
#content {
margin:28px 0;
width:100%;
position:relative;
/*z-index:1;*/
min-height:600px;
}
.conteiner {
padding:20px 30px;
border-radius:10px;
background:url(../images/content-bg.jpg) top left repeat-y;
line-height:24px;
}
h2 {
font-size:28px;
color:#ffffff;
margin:10px 0;
}
.p1 {margin:10px 0}
.line {
height:1px;
background:url(../images/line.png) left repeat-x;
}

footer {
width:100%;
text-align:center;
padding-bottom:40px;
}
footer span {color:#FFF;}

reset.css


a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}

Edited by GstarMax
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
GstarMax Explorer

GstarMax

Posted
  • Author
Posted
z-index:500px;

Что-что? Видимо, что-то не то читали.

убрал я px, только вот ничего не меняется, может кто-то попробует правильно поставить его...

хух, сделал, нужно было в .menu ul поставить z-index:500;

как обычно, на элементарном парюсь.

Всем спасибо за ответы!!! :)


/*** выпадающие пкнкты */
.menu ul {
position:absolute;
left:-9999px;
list-style:none;
z-index:500;
}

Link to comment
Share on other sites
  • 0
Pollucs Explorer

Pollucs

Posted
Posted

Здравствуйте! У меня та же проблема, выпадающее меню прячется за основной блок контента.

Вот код css:

 
/*—————————————————————- 
  Copyright:
  © 2008 - 2010 IceTheme
  
  License:
  
  Author:
—————————————————————- */
 
.lofmenu_jshopping {
width:100%;}
 
.lofmenu_jshopping ul.lofmenu {
margin:0;
padding:0;
position: relative;
list-style-type:none;
z-index: 999;}
 
.lofmenu_jshopping ul.lofmenu li{
width:100%;
display:block;
margin: 0;
padding: 0;
position:relative;
/*
position: relative;
z-index: 10;
*/}
 
.lofmenu_jshopping .lofmenu .lofitem1,
.lofmenu_jshopping .lofmenu .lofitem2 {}
 
.lofmenu_jshopping .lofmenu a {
display:block;
color:#000000;
position:relative;
padding:6px 0;
text-decoration:none;
border-bottom:1px dotted #ccc;
-webkit-transition:background-color color .3s ease-out;
-moz-transition:background-color .3s ease-out, color .3s ease-out;
-o-transition:background-color .5s ease-out; 
transition:background-color .5s ease-out;}
 
 
/* on hover */
.lofmenu_jshopping .lofmenu .lofactive > a{
background-color: #eee;
color: #222 }
 
/* when is current */
.lofmenu_jshopping .lofmenu .ice-current > a{
background-color:#eee;
color: #222 }
 
.lofmenu_jshopping .lofmenu > .ice-current > a:before {
content:"";
background:url(images/current.png) no-repeat center right;
position:absolute;
height:20px;
width:14px;
right:-24px}
 
 
 
 
.lofmenu_jshopping .lofmenu .lofitem1 img{
margin:0 9px 0 5px;
float:left;}
 
 
.lofmenu_jshopping .lofmenu .lofitem1 a span.counter {
color:#999;
padding-left:3px}
 
 
/* when has childs items */
.lofmenu_jshopping .lofmenu .lofitem1 a i{
background: url(images/next.png) no-repeat top;
display: block;
height: 14px;
position: absolute;
right: 5px;
top: 12px;
width: 14px;}
.lofmenu_jshopping .lofmenu .lofactive > a i{
background-position:bottom}
 
 
 
/* second level menu */
.lofmenu_jshopping .lofmenu .lofitem1 ul{
width:100%;
position:absolute;
top: -1px;
left:99.9%;
border:1px solid #ccc;
box-shadow:0 0 10px #999;
padding:0;
margin:0;
background:#fff;
z-index: 100;}
 
 
В самом первом случае меняю position: relative на position: absolute, при этом выпадающее меню становится поверх блока контента, но тогда основной блок меню становится как бы пустым, т.е. на него накладываются другие модули.
Помогите пожалуйста, сломал уж голову, не знаю где дальше копать.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • DevCube
      Требуется Full stack .NET (Junior & Senior)
      By DevCube
      Привет!

      Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube.
      https://mydevcube.com/
      Это международная компания, которая занимается DevOps, web и software разработками.

      На данный момент в команду требуются Full stack .NET (Junior & Senior)

      — 3+ year of commercial experience;
      — Strong knowledge of Angular 5+;
      — Strong knowledge of Typescript;
      — Experience with HTML/HTML5, CSS/CSS3, SCSS;
      — Good understanding of Git;
      — Conversational English.

      Будет плюсом: VB experience

      Условия:
      Удаленная работа full-time
      Зарплата от 10-20$/час по результатам собеседования.

      Обязательное условие - быть на связи до 21-22:00 по Москве.
      Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Divnenkiy
      Заполнить резиновый контент картой
      By Divnenkiy
      Ребята доброго времени! Строго не ругайте, html далеко не мой конек, новичок прошу помощи..
      Помогите пожалуйста с шаблоном, резиновый шаблон, футер прижат к низу страницы, всё работает как мне кажется хорошо.
      Но в центральную часть (зеленую) нужно вставить карту размером на всю зеленую область, и чтобы она тянулась при изменении размеров окна, и чтобы она не заезжала под/на правый блок и другие блоки. Как это реализовать?
      Блок карты не реагирует на размеры 100%, только на фиксированный размер в пикселях, а если поставить 100% то она просто исчезает.
      Если можно такое сделать хотя бы для Google Chrome, буду безмерно счастлив.
      То, с чем мучаюсь прикладываю во вложении.
      problem_1.zip
    • Tipylja
      HTML 5 на деле - шаблон интернет магазина
      By Tipylja
      Здравствуйте. У меня уже очень давно зреет вопрос, а теперь я решил переверстать несколько своих проектов с использованием html5 тегов. И задался я вопросом какие же теги из html5 стоит использовать в интернет-магазинах, по копав интернет, ничего конкретного я не нашел, а что нашел датировано 2010-2012 годами.
      Есть понятные вещи и некоторые я уже давно использую, например, тег <nav>, все меню сайта у меня находятся в этом теге.
      Тег <heder> и <footer> тоже не заставляет задуматься. Н на этом пожалуй и все….. Остальные теги вгоняют меня в мысли, нужны ли они или как их правильно использовать:
      Тег <article> - почитал в интернетах, вроде в него советуют совать основной контент страницы, то есть(упрощенно):
      <body> <header></header> <article></article> <footer></footer> </body> 1)То есть в теге <article> идет весь контент что за шапкой и до футера – это верно или так лучше не делать, в плане семантики тега?
      Идем вглубь — тег <section> - вроде как то, что в <article> разделено логически на блоки, делится именно этим тегом:
      <article> <section><nav class=”middleMenu”>...</nav></section>  - Среднее меню рубрик <section><nav class=”leftMenu”>...</nav></section> - Левое меню категорий <section> - Заголовок страницы-> краткая статья -> перечень позиций -> большая статья <h1>…</h1> <p>…</p> <div class=”position1”>…</div> <div class=”position2”>…</div> <div class=”position3”>…</div> <div class=”position4”>…</div> <p>…</p> </section> </article> 2) Правильно ли так разделить контент этим тегом?
      3) Левое меню в теги секции и в теги навигации – возможно тег секции лишний или это меню лучше запихнуть в <aside>(семантика которого говорит что это сайд бар, вероятно не очень подходит что бы там было меню, или я не прав?)? 
      4) Возможно есть еще какие-то теги, которые можно и желательно употребить в случае шаблона для интернета магазина? Например, в моем случае позиции обвернуты в <div>, возможно стоит обвернуть в <figure>? Информация везде разница и не хотелось бы ошибиться, прошу подсказок и напутствий у тех, кто пользуется всем этим инструментарием на практике
    • Andrew_007
      Стоит ли использовать <!DOCTYPE html>?
      By Andrew_007
      Здравствуйте!
       
      Как вы думаете, стоит ли использовать <!DOCTYPE html>, доктайп для html5, если сам валидатор http://validator.w3.org/ предупреждает что это экспериментальная функция и могут быть проблемы?
      Какой доктайп сейсас лучше использовать?
      Каким доктайпом всегда пользуетесь вы?
      Или выбор доктайпа зависит от конкретного проекта?
    • foxtrot874
      Почему такая разница в шрифтах и как верстать правильно?
      By foxtrot874
      Разное отображение шрифтов в разных браузерах. При чем наблюдается различие в разный системых Windows 7 Windows 8. Вот скрины. Вот типичный сайт, выложил на хостинг, чтобы можно было посмотреть. Почему такая разница в шрифтах? Они не кроссбраузерны получается. Вот и скрины с разных систем, исерено все линейкой как видите.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept