0

このメニューのドロップダウンの側面を表示することができません。これは簡単に修正できると思いますが、表示されません。メニュー自体は派手なものではなく、サブメニューもありません。単純なドロップ オプションが必要なだけです。いくつかのチュートリアルを確認しましたが、それらはすべて異なっています。そのため、既に行った作業を調整する際に助けが得られる場合、これが最良のシナリオになります。事前に助けてくれてありがとう！

#headernav {
    float: right;
    width: 555px;
    padding: 0px;
    text-align:center;
    margin:0;
    list-style-type:none;

}

#headernav li {
    float:left;
}

#headernav li a {
    display: block;
    text-decoration: none;
    width:6em;
    height:35px;
    text-decoration:none;
    color:#161616;
    background:url(../images/linkbg2.png);
    background-repeat:no-repeat;
    padding:0.2em 0.6em;
    padding-top:20px;
    margin-left:3px;
    font-size:14px;
    letter-spacing:1px;
    font-weight:500;
}


#headernav li a:hover {
    text-decoration: none;
    height:35px;
    color: #161616;
    position: relative;
    width: 6em;
    text-align: center;
    padding:0.2em 0.6em;
    display: inline;
    float:left;
    padding-top:20px;
    margin-left:3px;
    cursor:pointer;
}

#headernav li ul {
    display:none;
}

#headernav li hover:ul {
    display:block;
    position:absolute;
    width:150px;
    background:#03C;
    list-style:none;
}

#headernav ul li {
  float: none;
}

#headernav ul li a {
  display: block;
  border-top: 1px solid #666;
}

HTML:

<ul id="headernav">
<li><a href="donate.html">Donate</a></li>
<li><a href="answers.html">Answers</a></li>
<li><a style="width:8.5em;" href="news.html">News & Events</a></li>

<li><a href="about.html">About Us</a>
<ul>
      <li><a href="mission.html">Mission</a></li>
</ul>
</li>

<li><a href="contact.html">Contact</a></li>
</ul>
4

2 に答える 2

0

矢印を追加する非常に簡単な方法は次のとおりです。

#headernav li {
    float:left;
    position:relative;   <-- add this
}

次に、このクラスをcssに追加します

#headernav li a.hasdropdown:after {
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #000000 transparent transparent transparent;
  position:absolute;
  left: 90px;
  top: 24px;  
}

矢印を表示するすべてのアンカー タグに「hasdropdown」クラスを追加します。

<li><a href="about.html" class="hasdropdown">About Us</a>

これが少し役立つことを願っています。

于 2013-01-13T01:35:36.417 に答える
0

私はあなたが書くつもりだったと思います

#headernav li:hover ul {

それ以外の#headernav li hover:ul {

また、おそらくtop: 60px;このクラスに次のようなものを追加する必要があります。

于 2013-01-13T01:01:08.950 に答える