CSSドロップダウンメニューの間隔

メニュー項目の間隔はオフですが、このナビゲーションメニューは作成できました。また二次的なリストの私は項目の1つのためにそれらを広げなければならなかった。最長のアイテムの長さによって幅を変える方法はありますか？CSSドロップダウンメニューの間隔

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Menu</title> 
<style type="text/css"> 

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
    width: 10em; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding-top:12px; 
    height: 28px; 
    float: left; 
    background: #f15a22; 
    width: 7em; /* width needed or else Opera goes nuts */ 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: auto; 
    top: 45px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    color: #f9f7ee; 
} 


</style> 

<script type="text/javascript"><!--//--><![CDATA[//><!-- 

sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
     } 
     sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

//--><!]]></script> 

</head> 
<body> 



<ul id="nav"> 
    <li><a href="#">About</a> 
    </li> 
    <li><a href="#">Teaching</a> 
     <ul> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Piano</a></li> 
      <li><a href="#">Guitar</a></li> 
      <li><a href="#">Drums</a></li> 
      <li><a href="#">Theory</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Performing</a> 
     <ul> 
      <li><a href="#">Classical Piano</a></li> 
      <li><a href="#">Jazz Piano</a></li> 
      <li><a href="#">The Ginger Nuts</a></li> 
      <li><a href="#">The Legion Of Doom</a></li> 
     </ul>  
    </li>  
    <li><a href="#">Media</a> 
     <ul> 
      <li><a href="#">Photos</a></li> 
      <li><a href="#">Audio</a></li> 
      <li><a href="#">Video</a></li> 
      <li><a href="#">Articles</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Blog</a> 
    </li> 
    <li><a href="#">Links</a> 
    </li>   
    <li><a href="#">Contact</a> 
    </li> 

    <!-- etc. --> 

</ul> 


</body> 
</html>

出典

2011-09-16 Ged

*それはそんな感じですか？メニューの幅はどれくらいですか？ – thirtydot

@thirtydot私はポスターがこの現象を指していると思う：http：//jsfiddle.net/uNNKd/1/（演奏にホバー） –

@ジョセフ：私のコメントは、彼の最初の文章に関するもので、テキスト間の間隔（この部分のドロップダウンについては忘れてください）。 – thirtydot

これで修正されました。しかし、クロスブラウザをテストしていない。この方法でも、また動作しますUL

http://jsfiddle.net/uNNKd/

#nav li li { 
    clear: both; 
    width: auto; 
}

EDIT

#nav li li { 
    float: none; 
    width: auto; 
}

に追加した幅の属性を削除します。

出典

2011-09-16 23:38:28

ここにスクリーンショットです。http://shiny.me/share/7t1nh4.png 問題1：各項目間の間隔がでも問題2：ドロップダウンメニューの各項目の幅を変更したいのですがテキストの幅は固定幅ではなく幅に応じて異なります。 – Ged

@Gedラット...申し訳ありません...私は行かなければなりません...あなたは私のフィディドに対する編集を見ることができます：http://jsfiddle.net/uNNKd/2/。それらは「編集」によって示される。 –

このようにそれを試してみてください。

http://jsfiddle.net/andresilich/TMrpA/2/

:: EDIT ::ここ

は、CSSのコードです：あなたは間隔が "オフ" であると言うとき、何

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding:0 20px; 
    height: 40px; 
    line-height:40px; 
    float: left; 
    background: #f15a22; 
    position:relative; 
} 

#nav li li { 
    float:none; 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: 0; 
    top: 40px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    color: #f9f7ee; 
}

出典

2011-09-16 23:54:44

2番目のレベルのメニューの位置合わせを修正しました。ここでは2番目のバージョンがあります：http://jsfiddle.net/andresilich/TMrpA/2/ ...これで、すべての内容が適切に整列され、liの内容のサイズに従って配置されますタグ。 –

Working Brilliant :)ありがとうございました – Ged

参照用にリンク先にコードを投稿してください。 –

CSSドロップダウンメニューの間隔

答えて

関連する問題