添加格內格在HTML

我有一個包含一個div .Inside股利頭我已經把使用CSS.Now這個div裏面我已經把我的標誌DIV的背景圖像.Till現在每一件事情是OK.Now我要從標誌，但問題添加dropdownmenu客場40點是什麼我試圖添加已大幅下降，頭..我現在無法描繪出..添加格內格在HTML

這裏是我的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

請幫助我..

來源

2014-05-22 user3664608

你沒有顯示你的菜單中的任何CSS代碼，你嘗試過'。菜單{浮動;左;}'？ – Omega

將很好地創建一個jsfiddle – Vel

@ user3664608做一個小提琴它會幫助我們找到你的bug – Vicky

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

您需要將您的菜單了您的標誌格... 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;}

來源

2014-05-22 11:59:35 Omega

一個澄清先生..爲什麼我的標誌圖像下降，當我加入保證金：10px汽車;代替邊距：0px auto; – user3664608

@ user3664608當然，這是因爲您要爲元素的頂部和底部添加10px的邊距。 10px適用於頂部和底部，auto適用於左側和右側。祝你好運。 – Omega

如果我只想要放置下拉菜單並且徽標應該放在原始位置 – user3664608

你有如下

<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>

附加浮動菜單CSS改變在HTML頁面

float:left;

，並設置在菜單的CSS保證金爲

margin: 0 auto 0 -40px;

希望這將幫你。

來源

2014-05-22 11:58:17

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; 
}

這裏是一個DEMO

來源

2014-05-22 12:02:49 Vicky

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'); 
});

來源

2014-05-22 12:23:22 apsuva

添加格內格在HTML

回答

相關問題