0

これまでの私のコードは次のとおりです。

<?php

 echo '
        <nav class="floatfix">      
                <ul>
                    <li><a href="index.php">Home</a></li>
     <ul>
      <li><a href="index2.php">£3.99 T-Shirts</a></li>
      <li><a href="index3.php">£4.99 T-Shirts</a></li>
      </ul>
                    <li><a href="login.php">Log In</a></li>
                    <li><a href="#">Account</a></li>
                    <li><a href="feedback.php">Feedback</a></li>
                    <li><a href="#">Checkout</a></li>
                    <li><a href="aboutus.php">About Us</a></li>
                    </ul>
            </nav>
   ';

?>

これが私のCSSです

/* =float clearing
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.floatfix {
   display: block;
   height: 1%;
   text-transform: uppercase;

}
.floatfix:after  {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

ナビゲーションバーの[ホーム]の下にあるドロップダウンメニューとして、3.99ポンドのシャツと4.99ポンドのシャツを入手するにはどうすればよいですか。

どうもありがとうございます

4

2 に答える 2

0

私が何かを逃していない限り、あなたは次のような選択を使用したいと思います：

 <nav class="floatfix">      
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <select id="lstPrice">
                     <option value="3.99">£3.99 T Shirts</option>
                <option value="4.99">£4.99 T Shirts</option>
              </select>
                    <li><a href="login.php">Log In</a></li>
                    <li><a href="#">Account</a></li>
                    <li><a href="feedback.php">Feedback</a></li>
                    <li><a href="#">Checkout</a></li>
                    <li><a href="aboutus.php">About Us</a></li>
                    </ul>
            </nav>
于 2012-10-25T18:22:40.373 に答える
0

CSSに入る必要さえなく、以下のようにホームLIでセカンダリULを囲む必要があります。

        <nav class="floatfix">      
            <ul>
                <li><a href="index.php">Home</a>
                   <ul>
                       <li><a href="index2.php">£3.99 T-Shirts</a></li>
                       <li><a href="index3.php">£4.99 T-Shirts</a></li>
                   </ul>
                </li>
                <li><a href="login.php">Log In</a></li>
                <li><a href="#">Account</a></li>
                <li><a href="feedback.php">Feedback</a></li>
                <li><a href="#">Checkout</a></li>
                <li><a href="aboutus.php">About Us</a></li>
                </ul>
        </nav>

クイックチュートリアルから盗まれたCSS：

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}   ​

デモ： http： //jsfiddle.net/calder12/7j6H9/

于 2012-10-25T18:26:00.827 に答える