css - CSS ドロップダウンの作成方法

Question

ブロガーブログの CSS ドロップダウンを作成したいと考えていました。しかし、私は CSS の専門家ではなく、ブロガーのテンプレートは私がデザインしたものではないため、多くの困難に直面しました。私は多くのことを試しましたが、何もうまくいきませんでした。コードを差し上げますので、エラーを特定してください。ありがとう...

ナビゲーションリンクの HTML 構造:

<div id='mainmenu'>
<ul>

<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li>

<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>

問題が実際にあるドロップダウン要素のコード:

  <ul>
    <li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li>
    <li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>        
  </ul>

ここからは通常のコードです:

</li>

<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li>

<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li>
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li>
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li>

</ul>
</div>

このナビゲーションリンクが適用されている URL を参照してください: www.technodoze.com

今私のCSS：

#mainmenu a {
text-decoration:none;
display:block;
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}

#mainmenu li a:hover,
#mainmenu li a:focus,
#mainmenu a.mainMenuParentBtnFocused{

/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}

#mainmenu , #mainmenu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/  
background: none;
left:0;
}

#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;



}
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}

ここまではすべてうまくいっています... (上の CSS コードは #mainmenu ul li のためのもので、実際にはうまくいっています。)

問題はここから始まります...

#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;

}

#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
}


#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}

ドロップダウンを作成しようとしましたが、子要素 [ #mainmenu ul li ul ] がドロップダウンの形になっておらず、横に埋め込まれています。. (これは現在、www.technodoze.com にアクセスして Amazing Stuff ナビゲーションリンクにマウスを合わせると表示できる Web サイトに適用されます。)

まれな間違いは CSS コードの最後の部分にあると確信していますが、#mainmenu ul またはその他の上位要素のフロートが原因でこの問題が発生した場合に備えて、シナリオ全体を示しました...

助けてくれた人に感謝します...

ありがとう

更新: 9 月 27 日 11:00 GMT、理由: もう 1 つの問題

コードを次のように変更しました。

#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}

#mainmenu ul li ul li a {
background-color:#333333;

}

#mainmenu ul li ul .first_li {

-moz-border-top-left-radius: 7px;
-khtml-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;

-moz-border-top-right-radius: 7px;
-khtml-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#mainmenu ul li ul .last_li {

-moz-border-bottom-left-radius: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;

-moz-border-bottom-right-radius: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}

#mainmenu ul li ul {
-moz-box-shadow: 4px 4px 2px #888;
-webkit-box-shadow: 4px 4px 2px #888;
box-shadow: 4px 4px 2px #888;
-khtml-box-shadow: 4px 4px 2px #888;
border-color: #F1F1F1;
-moz-outline-color: #F1F1F1;

}




#mainmenu a {
text-decoration:none;
display:block;
}

#mainmenu a {
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}

#mainmenu li a:hover, #mainmenu li a:hover ul li,
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a,
#mainmenu a.mainMenuParentBtnFocused{

/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}

#mainmenu , #mainmenu > ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/  
background: none;
left:0;
}

#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;



}
#mainmenu li ul {
  display: none;

  margin:0;
  padding 0;
  position:absolute;
  left:0;

}

#mainmenu li:hover > ul {
  display: block;
  float:none;
  position:absolute;
  top:159px;
  left:235px;
}


#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
  list-style-type: none;
  margin:0;
  display: block;
  padding:0;
}

今残っている唯一の問題は、アドレス[#mainmenu ul li ul li]を持つ2番目の順序で空白を取得していることです。

このリンクwww.technodoze.comに行くと見ることができます

いくつかの解決策を提案してください。

ありがとう

score 1 · Accepted Answer

変化：

#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}

に：

 #mainmenu > li {
    /*great place to use a background image as a divider*/
    background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
    background-repeat:no-repeat;
    background-position: 100% 0px;
    cursor: pointer;
    float: left;
    margin: 0 0px 0 0px;
    padding: 0 2px 0 1px;
    height: 30px;
    display: inline;
    }

そして、いくつかの新しいものを追加します：

#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
    top:30px;   /*new line*/
    left:140px; /*new line*/
}

デモ

score 0 · Accepted Answer

このドロップダウンメニューを試してください http://www.lwis.net/free-css-drop-down-menu/

css - CSS ドロップダウンの作成方法

2 に答える 2

Related

Reference