У меня есть заголовок, который содержит div. Внутри div я поместил фоновое изображение с помощью CSS. Теперь внутри этого div я поместил свой логотип div. До сих пор все в порядке. Теперь я хочу добавить раскрывающееся меню в 40 пикселей от логотип, но проблема в том, что все, что я пытаюсь добавить, попадает в заголовок .. Я не могу отследить ..

Вот мой HTML ..

<div class="header-wrapper">
            <div class="header">
                <div class="logo"> <img src="image/logo.png" alt="logo"/>



                </div>
            </div>
        </div>

А это мой CSS ..

html, body {
color: #6F6F6F;
font-family: Trebuchet MS;
font-size: 0.75em;
margin: 0 auto;
width: 100%;
padding: 0px !important; }

.img {
border: 0 none; }


.header-wrapper {
background: url("../image/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: fixed;
width: 100%;
z-index: 60001; }

.header {
clear: both;
height: 77px;
margin: 0 auto;
padding: 0 20px;
width: 960px; }

.logo {
float: left;
height: 75px;
margin: 1px 49px 0 0;
width: 75px; }

И это мой выпадающий код в HTML, который я хочу добавить ..

<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>

И вот мой CSS ..

<style type="text/css">

a{
text-decoration: none;
 }
.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin: 0 auto;
}
.menu li a{
color: #515151;
display: block;
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
}
.menu li a:hover{
background: #f44141;
color: #fff;
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 40px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
 border: 1px solid #ddd;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
 }
   </style>

Вот Fiddle i, в котором я хочу раскрывающееся меню рядом с изображением логотипа, а не вниз.

Скрипка

Пожалуйста, помогите мне..

1
user3664608 22 Май 2014 в 15:33

4 ответа

Лучший ответ

http://fiddle.jshell.net/T8snP/2/

Вам нужно переместить свое меню за пределы div вашего логотипа ... HTML:

<div class="header-wrapper">
    <div class="header">
        <div class="logo">
            <img src="image/logo.png" alt="logo" />
        </div>
        <div class='menu'>
<a class='hover-link'>Hover on Menu</a>

                <div class='sub'>
                    <ul class='sub-options'>
                        <li><a href='#'>Home</a>
                        </li>
                        <li><a href='#'>About</a>
                        </li>
                        <li><a href='#'>Services</a>
                        </li>
                        <li><a href='#'>Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
    </div>
</div>

Затем поместите div меню влево с помощью этого CSS, как предлагается в комментарии:

.menu {float: left;}
0
Omega 22 Май 2014 в 11:59

Вы должны изменить, как показано ниже на странице html

<div class="header-wrapper">
    <div class="header">
        <div class="logo">
            <img src="image/logo.png" alt="logo" /></div>
            <div class='menu'>
<a class='hover-link'>Hover on Menu</a>

                <div class='sub'>
                    <ul class='sub-options'>
                        <li><a href='#'>Home</a>
                        </li>
                        <li><a href='#'>About</a>
                        </li>
                        <li><a href='#'>Services</a>
                        </li>
                        <li><a href='#'>Contact</a>
                        </li>
                    </ul>
                </div>

        </div>
    </div>
</div>

Добавить float в меню css как

float:left;

И установите поле в меню css как

margin: 0 auto 0 -40px;

Надеюсь, что это поможет вам.

1
Ghost Answer 22 Май 2014 в 11:58

HTML

<div class="header-wrapper">
            <div class="header">
                <div class="logo"> <img width="100%" height="100%" src="http://i.stack.imgur.com/3Gtg9.jpg" alt="logo"/></div>
                  <div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>



            </div>
        </div>

CSS необходимо изменить ...

.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin-left:40px;
}

ЗДЕСЬ - это ДЕМО

0
Vicky 22 Май 2014 в 12:02
margin-left:40px;

<div class="header-wrapper">
<div class="header">
    <div class="logo">
        <img src="image/logo.png" alt="logo" />
    </div>
    <div class='menu'>
           <a class='hover-link'>Hover on Menu</a>
            <div class='sub'>
                <ul class='sub-options'>
                    <li><a href='#'>Home</a>
                    </li>
                    <li><a href='#'>About</a>
                    </li>
                    <li><a href='#'>Services</a>
                    </li>
                    <li><a href='#'>Contact</a>
                    </li>
                </ul>
            </div>
        </div>
</div>

Ваше меню не работает? у вас есть код для меню? проверьте мой код: http://fiddle.jshell.net/T8snP/5/

$('.menu').click(function(){
var curDd = $(".sub");
var dur = 350;
if(curDd.hasClass('shown')){
    curDd.fadeOut(dur/2);
    curDd.removeClass('shown');
} else {
    curDd.css({ opacity: 0.01, marginTop: 20 }).show().animate({ opacity: 1, marginTop: 0 }, { duration: 250, easing: "easeOutQuad" });
    curDd.addClass('shown');
}

return false;
});

$('body, html').click(function(){
    $('.shown').fadeOut(250).removeClass('shown');
});
0
apsuva 22 Май 2014 в 12:23