X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Горизонтальное выпадающее меню, невыпадает
Solar-Heat
Solar-Heat
Topic Starter сообщение 16.4.2013, 14:44; Ответить: Solar-Heat
Сообщение #1


Сделал выпадающее меню, но при наведении можно нажать только на первый пункт снизу на, если попробовать навести на пункт ниже меню уходит, никак не пойму в чем ошибка.
html:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Mate_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script src="js/tms-0.3.js" type="text/javascript"></script>
<script src="js/tms_presets.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
<style type="text/css">
#page1 .extra .nav header .wrapper .extra-wrap .indent .img-indent-bot {
color: #000;
}
</style>
</head>
<body id="page1">
<div class="extra">
<div class="main">
<!--==============================header=================================-->
<header>
<div class="wrapper p4">
<h1><a href="index.html">Software</a></h1>


<ul class="list-services">
<figure class="img-indent"><img src="images/flagua.jpg" alt="" width="25" height="25" /></figure>
<figure class="img-indent"><img src="images/flagru.jpg" alt="" width="25" height="25" /></figure>
<figure class="img-indent"><img src="images/flagen.jpg" alt="" width="25" height="25" /></figure>
<figure class="img-indent"><img src="images/flagpt.jpg" alt="" width="25" height="25" /></figure>

</ul>
</div>
<ul class="nav">
<li class="active">
<a href="index.html">Главная</a>
</li>
<li>
<a href="about.html">О компании</a>
</li>
<li>
<a href="catalogue.html">Каталог</a>
<ul>
<li><a href="#">КЗП</a></li>
<li><a href="#">КЗХ</a></li>
<li><a href="#">КЗТТ</a></li>
<li><a href="#">КЗС и КЗСН</a></li>
<li><a href="#">САС</a></li>
</ul>
</li>
<li>
<a href="delivery.html">Доставка</a>
</li>
<li>
<a href="enchiridion.html">Справочник</a>
</li>
<li>
<a href="news.html">Новости</a>
</li>
<li class="last">
<a href="contacts.html">Контакты</a>
</li>
</ul>
<div class="wrapper">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li><img src="images/slider-sas.jpg" alt="" /></li>
<li><img src="images/slider-1.jpg" alt="" /></li>
<li><img src="images/slider-2.jpg" alt="" /></li>
</ul>
</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
<div class="extra-wrap">
<div class="indent">
<strong class="title-1">ЗАЩИТНЫЕ СИСТЕМЫ ДЛЯ ТРУБОПРОВОДОВ</strong>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Уровень прочности К8</p>

<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Нержавеющий материал</p>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Высокая температура эксплуатации</p>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Надежность системы</p>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Термостойкость</p>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Качественные крепления</p>
<figure class="img-indent"><img src="images/ok.png" alt="" width="17" height="15" /></figure>
<p class="img-indent-bot">Химстойкие материалы</p>

<div class="aligncenter">
<a class="button" href="#">Каталог</a>

<a class="buttonq" href="#"> Прайс</a>
<a class="button" href="#">Опросный лист</a>
</div>
</div>
</div>
</div>
</header>

CSS:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

/* Global properties ======================================================== */
html {width:100%;}

body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#fff;
min-width:960px;
background:#fff;
}

.bg {width:100%; background:url(../images/bg-top.jpg) center 0 no-repeat;}

.main {
width:960px;
padding:0;
margin:0 auto;
font-size:0.875em;
line-height:1.5714em;
}

a {
color:#000;
outline:none;
}
a:hover {text-decoration:none;}

.col-1, .col-2 {float:left;}

.wrapper {width:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}

p {margin-bottom:18px;}
.p1 {
margin-bottom:8px;
color: #FFF;
}
.p6 {
margin-bottom:8px;
color: #000;
text-align: justify;
}
.p61 {
margin-bottom:8px;
color: #000;
text-align: justify;
font-weight: bold;
}
.p2 {margin-bottom:15px;}
.p3 {margin-bottom:30px;}
.p4 {
margin-bottom:0px;
}
.p5 {margin-bottom:50px;}

.reg {text-transform:uppercase;}

.fleft {float:left;}
.fright {float:right;}

.alignright {text-align:right;}
.aligncenter {text-align:center;}

.it {font-style:italic;}

.color-1 {color:#fff;}
.color-2 {color:#000;}
.color-3 {color:#666;}

/*********************************boxes**********************************/
.indent {padding:20px 10px 0 0;}
.indent-left {padding-left:15px;}
.indent-left2 {padding-left:20px;}
.indent-right {padding-right:50px;}
.indent-top {padding-top:15px;}
.indent-top2 {padding-top:20px;}

.indent-bot {margin-bottom:20px;}
.indent-bot2 {margin-bottom:30px;}
.indent-bot3 {margin-bottom:45px;}

.prev-indent-bot {margin-bottom:10px;}
.img-indent-bot {margin-bottom:5px;}
.margin-bot {margin-bottom:35px;}

.img-indent {
float:left;
margin:0 5px 0px 0;
}
.img-indent2 {float:left; margin:0 40px 0px 0;}
.img-indent-r {float:right; margin:0 0px 0px 40px;}

.buttons a:hover {cursor:pointer;}

.nav a,
.menu a,
.list-1 a,
.list-2 a,
.list-3 a,
.list-services a,
.link,
.link-2,
.button,
.buttonq,
.button1,
.button2,
.button3,
.button4,

h1 a {text-decoration:none;}

/*********************************header*************************************/
header {
width:100%;
position:relative;
z-index:2;
}

h1 {
padding:0px 0 0 0px;
position:relative;
float:left;
}
h1 a {
display:block;
width:600px;
height:100px;
text-indent:-9999em;
background:url(../images/logo.png) 0 0 no-repeat;
}

.list-services {
padding:2px 0px 0 0;
float:right;
}
.list-services li {
float:left;
padding:0 0 0 34px;
font-size:15px;
line-height:1.2em;
}
.list-services a:hover {text-decoration:underline;}


/***** menu new *****/
.nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}
.nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}
.nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;

text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.nav li a:hover{
color:#fff;
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
.nav ul{
list-style:none;
position:absolute;
left:-9999px;
opacity:0; /
-webkit-transition:0.25s linear opacity;
}
.nav ul li{
padding-top:1px;
float:none;
background:url(dot.gif);
}
.nav ul a{
white-space:nowrap;
display:block;
}
.nav li:hover ul{
left:0;
opacity:1;
}
.nav li:hover a{
background:#6b0c36;
background:rgba(107,12,54,0.75);
text-decoration:underline;
}
.nav li:hover ul a{
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
.nav li:hover ul li a:hover{
background:#333;
background:rgba(51,51,51,0.75);
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}

/***** slider *****/

.slider-wrapper {
width:470px;
height:337px;
padding:25px 0 0 91px;
background:url(../images/slider-bg.png) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
float:left;
margin:0 30px 0 0px;
}
.slider {
position:relative;
width:410px;
height:290px;
}
.items {display:none;}

.next,
.prev {
display:block;
width:36px;
height:36px;
cursor:pointer;
position:absolute;
z-index:99;
top:135px;
}
.next {
background:url(../images/slider-next.png) 0 0 no-repeat;
right:1px;
}
.prev {
background:url(../images/slider-prev.png) 0 0 no-repeat;
left:26px;
}

.title-1 {
display:block;
font-size:20px;
line-height:1.2em;
color:#ec4003;
text-transform:uppercase;
margin-bottom:10px;
text-align: center;
}
.title-2 {
display:block;
font-size:13px;
line-height:1.2em;
color:#e7e7e7;
margin-bottom:2px;
letter-spacing:0px;
}

/*********************************content*************************************/
#content {
width:100%;
padding:50px 0 50px;
position:relative;
z-index:1;
}
#page1 #content,
#page3 #content{padding:33px 0 50px;}

.spacer-1 {
width:100%;
background:url(../images/pic-1.gif) 217px 0 repeat-y;
}

h2 {
font-size:22px;
line-height:1.2em;
margin-bottom:0px;
color:#eb3c03;
text-transform:uppercase;
letter-spacing:0px;
text-align: center;
}
h3 {
font-size:32px;
line-height:1.218em;
color:#F30;
font-weight:normal;
letter-spacing:-1px;
margin-bottom:12px;
}
h7 {
font-size:20px;
line-height:1.218em;
color:#F30;
font-weight:normal;
letter-spacing:-1px;
margin-bottom:12px;
}
h6 {color:#fff; font-weight:normal;}

.border-bot {
width:100%;
padding-bottom:18px;
background:url(../images/pic-1.gif) 0 bottom repeat-x;
}

.box {
position:relative;
overflow:hidden;
border:1px solid #0d0d0d;
background:url(../images/box-tail.gif) 0 0 repeat-x #0d0d0d;
border-radius:12px;
margin:1px 0;
box-shadow: 0px 0px 0px 1px #2b2b2b;
-moz-box-shadow: 0px 0px 0px 1px #2b2b2b;
-webkit-box-shadow: 0px 0px 0px 1px #2b2b2b;
}
.box .padding {padding:10px 20px 10px 10px;}
#page2 .box .padding {padding:23px 15px 23px 23px;}
#page5 .box .padding {padding:16px 40px 23px 23px;}

.box99 {
position:relative;
overflow:hidden;
border:1px solid #0d0d0d;
background:url(../images/box-tail.gif) 0 0 repeat-x #0d0d0d;
border-radius:12px;
margin:1px 0;
box-shadow: px 0px 0px 1px #2b2b2b;
-moz-box-shadow: 0px 0px 0px 1px #2b2b2b;
-webkit-box-shadow: 0px 0px 0px 1px #2b2b2b;
left: 140px;
}
.box99 .padding {padding:320px 20px 10px 10px;}
#page2 .box99 .padding {padding:23px 15px 23px 23px;}
#page5 .box99 .padding {padding:16px 40px 23px 23px;}


.box-2 {
overflow:hidden;
border:1px solid #0d0d0d;
background:#0d0d0d;
border-radius:12px;
margin:1px 0;
box-shadow: 0px 0px 0px 1px #2b2b2b;
-moz-box-shadow: 0px 0px 0px 1px #2b2b2b;
-webkit-box-shadow: 0px 0px 0px 1px #2b2b2b;
}
.box-2 .padding {padding:13px 23px 20px;}
#page3 .box-2 .padding {padding:13px 13px 20px 23px;}

blockquote {
width:100%;
background:url(../images/quote.png) 0 0 no-repeat;
}
blockquote .padding-left {padding-left:40px;}

.numb {
display:block;
width:120px;
overflow:hidden;
font-size:50px;
line-height:72px;
color:#202020;
background:url(../images/numb-tail.gif) 0 0 repeat-x #d9d9d9;
border-radius:12px;
text-align:center;
float:left;
margin-right:7px;
height: 80px;
}
.numbnews {
display:block;
width:74px;
overflow:hidden;
font-size:50px;
line-height:50px;
color:#202020;
background:url(../images/numb-tail.gif) 0 0 repeat-x #d9d9d9;
border-radius:12px;
text-align:center;
float:left;
margin-right:7px;
height: 74px;
}
.button {
display:inline-block;
font-size:16px;
font-weight: bold;
line-height:2em;
color:#0d0d0d;
background:url(../images/button-tail.gif) 0 0 repeat-x #d9d9d9;
cursor:pointer;
border-radius:12px;
padding-top: 5px;
padding-right: 36px;
padding-bottom: 8px;
padding-left: 36px;
}
.button:hover {
color:#fff;
background:#ee4704;
font-weight: bold;
}

.buttonq {
display:inline-block;
font-size:16px;
font-weight: bold;
line-height:2em;
color:#0d0d0d;
background:url(../images/button-tail.gif) 0 0 repeat-x #d9d9d9;
cursor:pointer;
border-radius:12px;
padding-top: 5px;
padding-right: 40px;
padding-bottom: 8px;
padding-left: 40px;
}
.buttonq:hover {color:#fff; background:#ee4704;
font-weight: bold;}

.button1 {
display:inline-block;
text-align: center;
font-size:22px;
font-weight: bold;
line-height:1em;
color:#F30;
background:;
cursor:pointer;
}
.button1:hover {
color:#fff;
font-weight: bold;
}

.button2{
display:inline-block;
font-size:22px;
font-weight: bold;
line-height:1em;
color:#F30;
background:;


}
.button2:hover {
color:#F30;
}

.button3 {
display:inline-block;
font-size:13px;
line-height:1em;
color:#F30;
background:;
cursor:pointer;
}
.button3:hover {
color:#fff;

}

.button4 {
display:inline-block;
text-align: center;
font-size:14px;
font-weight: bold;
line-height:1em;
color:#F30;
background:;
cursor:pointer;
}
.button4:hover {
color:#fff;
font-weight: bold;
}

.list-1 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-2.gif) 0 10px no-repeat;
}
.list-1 li a {display:inline-block;}
.list-1 li{
text-decoration:underline;
color: #000;
}


.list-3 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-2.gif) 0 10px no-repeat;
}
.list-3 li a {
display:inline-block;
color: #FFF;
}
.list-3 li{
text-decoration:underline;
color: #F30;
}
.list-3 li a:hover {
color:#F30;
}

.list-2 li {
font-size:14px;
line-height:24px;
padding:0px;
background:url(../images/pic-1.gif) 0 bottom repeat-x;
}
.list-2 li a {
display:block;
color:#1799cf;
padding-left:12px;
background:url(../images/marker-1.gif) 0 10px no-repeat;
}
.list-2 li a:hover {color:#fff;}
.list-2 .last-item {background:none;}

.link:hover {text-decoration:underline;}

.link-1 {
display:block;
width:13px;
height:20px;
cursor:pointer;
background:url(../images/marker-1.png) left top no-repeat;
position:absolute;
right:23px;
bottom:36px;
z-index:9;
}
.link-1:hover {background-position:left bottom;}

.link-2 {
display:inline-block;
padding-left:15px;
cursor:pointer;
background:url(../images/marker-2.gif) 0 6px no-repeat;
}
.link-2:hover {text-decoration:underline;}

.text-1 {font-size:14px;}
.text-2 {font-size:14px; line-height:1.285em;}

dl {color:#808080;}
dl span {float:left; width:76px; color:#fff;}

/***** contact form *****/
#contact-form {display:block;}
#contact-form label {
display:block;
height:30px;
overflow:hidden;
}
#contact-form input {
float:left;
width:309px;
font-size:12px;
line-height:1.25em;
color:#fff;
padding:0px 10px;
margin:1px 0 0 1px;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #000;
background:#0d0d0d;
box-shadow: 0px 0px 0px 1px #2b2b2b;
-moz-box-shadow: 0px 0px 0px 1px #2b2b2b;
-webkit-box-shadow: 0px 0px 0px 1px #2b2b2b;
outline:none;
}
#contact-form textarea {
float:left;
height:169px;
width:784px;
font-size:12px;
line-height:1.25em;
color:#fff;
padding:2px 10px;
margin:1px 0 0 1px;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #000;
background:#0d0d0d;
box-shadow: 0px 0px 0px 1px #2b2b2b;
-moz-box-shadow: 0px 0px 0px 1px #2b2b2b;
-webkit-box-shadow: 0px 0px 0px 1px #2b2b2b;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:1.5em;
width:112px;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

.buttons {padding:16px 0 0 0; text-align:right;}
.buttons a {margin-left:10px;}

/****************************footer************************/
footer {
width:100%;
height:112px;
color:#0d0d0d;
background:url(../images/footer-tail.gif) center top repeat-x;
text-align:center;
position:relative;
z-index:99;
overflow:hidden;
}
footer a {color:#e82d02;}
footer p {margin:0;}
footer .inner {padding-top:35px;}


/*********extra***********/
.block {height:112px;}
.extra {
/* [disabled]min-height:100%; */
height:auto !important;
height:100%;
margin: 0 auto -112px;
position:relative;
overflow:hidden;
background:url(../images/bg.jpg) center top no-repeat;
background-color: #FFF;
}
html, body {height:100%;}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
http://
http://
сообщение 16.4.2013, 17:21; Ответить: http://
Сообщение #2


Вы больной?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilhtml
danilhtml
сообщение 16.5.2013, 13:10; Ответить: danilhtml
Сообщение #3


А ссылку на это самое меню, нельзя было кинуть?


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ruslaner___
Ruslaner___
сообщение 16.5.2013, 17:34; Ответить: Ruslaner___
Сообщение #4


Ну или хотя бы только код меню.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
killerblade
killerblade
сообщение 16.5.2013, 17:45; Ответить: killerblade
Сообщение #5


Solar-Heat, уважаемый буду рад помочь стучитесь в скайп.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
тропой Тигра
тропой Тигра
сообщение 21.12.2013, 12:39; Ответить: тропой Тигра
Сообщение #6


Добрый день! Подскажите, как оживить выпадающее меню! Вот меню http://48wallstreet.com/autosgmbhmenu1.php прописан скрипт для выпадения первого пункта в меню AUTOS

но возможно ошибка в скрипте функции выпадения
[JS]


<script type="text/javascript">
$(document).ready(function(){

/*Услуги*/

$('#n-music').hover(function(){
$('#music-grid').css('display','block');
$('#music').css('color','#00bbef').css('background','#dfdfdf');
})

$('#n-music').mouseleave(function(){
$('#music-grid').css('display','none');
$('#music').css('color','#ffffff').css('background','#000000');
})

/*КонецУслуги*/



});
</script>[/JS]

Скажите как сделать, что бы оно работало.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 22.12.2013, 0:26; Ответить: Azazaza_hb
Сообщение #7


в файле css
div#nav.globalNav ul#navlist li ul { - строка 32

left: -999em; - из-за этого блок не виден

position: absolute;


}
если анимацию не будете использовать, то это все можно в css и прописать, не используя скрипты. для этого существует псевдоселектор :hover

а тут http://api.jquery.com/hover/ есть пример использования события hover() на jquery
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
тропой Тигра
тропой Тигра
сообщение 22.12.2013, 15:07; Ответить: тропой Тигра
Сообщение #8


спасибо! Работает!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
 1 Викторио_mw 1467 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
 2 boltuk 3409 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
 1 lepota 1129 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4645 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
 0 SPiar 4817 28.9.2017, 17:45
автор: -korotkov-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 7:33

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet