Question

我一直关注如何使用css创建下拉菜单的在线视频。我跟着它，我的网站上没有任何下拉菜单的迹象。这太令人沮丧，因为我想要克服它，所以我现在可以专注于后端开发。希望你们能解决这个问题。

html代码：

public class MainActivity extends AppCompatActivity {

    private MediaPlayer mPlayer = new MediaPlayer();
    private OkHttpClient client = new OkHttpClient();
    private Gson gson = new Gson();

    public class HttpRequestTask extends AsyncTask<Void,Void,Items[]> {
        protected Items[] doInBackground(Void... params) {
            final Request request = new Request.Builder()
                .url("https://api.myjson.com/bins/1z98u")
                .build();

            Items[] items = null;

            try {
                final com.squareup.okhttp.Response response = client.newCall(request).execute();

                if(response.isSuccessful()) {
                    final RadioProgramInfo radioProgramInfo = gson.fromJson(response.body().charStream(), RadioProgramInfo.class);

                    items = radioProgramInfo.getResponse().getItems();

                } else {
                    throw new RuntimeException("ooops!");
                }

            } catch (Throwable t) {
                Log.e("MainActivity", t.getMessage(), t);
            }

            return items;
        }

        @Override
        protected void onPostExecute(Items[] items) {
            try {
                mPlayer.setDataSource(items[0].getSite_url());
                mPlayer.prepareAsync();

            } catch(IOException e) {
                e.printStackTrace();
            }
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mp.start();
            }
        });

        new HttpRequestTask().execute();
    }

}

CSS代码：

  <!DOCTYPE>
  <html lang="en">
 <head>
<title>MUSIC STORE</title>

<script src="js/jquery-1.11.2.min.js"></script>


<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
 </head>

 <body>
    <div id="wrapper">
        <header id="main_header">
            <div id="callout">
                <h2>&#9742; 111222333</h2>
                <p>Michigan State Kawasaki Iceland</p>
            </div>
            <h1>MUSIC STORE</h1>
        </header>

        <div class="clearfix"></div>

        <nav id="nav_menu">
            <ul id="nav">
                <li><a href="#">HOME</a></li>
                <li><a href="#">INSTRUMENTS</a>
                    <ul class="sub-menu">
                        <li><a href="#">ELECTRIC GUITARS</a></li>
                        <li><a href="#">BASS GUITARS</a></li>
                        <li><a href="#">DRUMS</a></li>
                    </ul>
                </li>
                <li><a href="#">AMPLIFIERS</a></li>
                <li><a href="#">ACCESSORIES</a></li>
                <li><a href="#">FEATURED ARTISTS</a></li>
            </ul>
        </nav>

        <script src="js/jquery.bxslider.min.js"></script><!--For Image   Slider-->
        <div class="slide-wrap">
            <div class="slider">
                <ul class="slider1">
                    <li><img src="../Music Store/img/ibanez.jpg"/></li>
                    <li><img src="../Music Store/img/raven.jpg"/></li>
                    <li><img src="../Music Store/img/metallica.jpg"/></li>
                </ul>
            </div>
        </div>  
        <script type="text/javascript">
        $('.slider1').bxSlider({
            mode: 'fade',
            captions: false,
            auto:true,
            pager:false,

            });
        $('.slider2').bxSlider({
            pager:false,
            captions: true,
            maxSlides: 3,
            minSlides: 1,
            slideWidth: 230,
            slideMargin: 10
            });
        $('.slider3').bxSlider({
            mode: 'fade',
            captions: false,
            auto:true,
            pager:false,
            controls:false,
            });
        </script>       


        <section class="one-third">
            <div class="border_section">
                <h3>NEW BASS AMPS THIS YEAR</h3>
                <img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
                <p>We would like to proudly announce the new shipment of fender bass amps that you all have been
                waiting for. It will provide you that rich rock and roll tone like no other. Please check
                out our bass amp section for more details.</p>
            </div>

        </section>

        <section class="one-third">
            <div class="border_section">
                <h3>NEW FEATURE ARTIST</h3>
                <img src="../Music Store/img/feature_markHolcomb.jpg"/>
                <p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
                at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
                here at Music Store.</p>
            </div>
        </section>

        <section class="one-third">
            <div class="border_section">
                <h3>ATTENTION VOCALISTS!</h3>
                <img src="../Music Store/img/GoMic.jpg"/>
                <p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can 
                definitely minimize the annoying sound that your dog makes while your recording. For more details, 
                Go to Accessories section.</p>
            </div>
        </section>

        <div class="clearfix"></div>

        <footer>
            <p>&copy;All Rights Reserved</p>
        </footer>
    </div>
  </body>
 </html>

Answer 1

将此添加到您的CSS：它将帮助您获得所需的结果。当然，对于您的偏好，仍然有适应性。

/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
    color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
    opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu  {
    width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li  {
    display: block;
}

修改

您应该使用opacity属性，而不是更改display属性以显示/隐藏子菜单。目前，子菜单只是透明，但始终打开。如果您的菜单高度较大，可以将鼠标悬停在幻灯片上打开时的位置打开它。通过使用display属性，您实际上将其隐藏起来，并且只有在您将菜单元素悬停时才会打开它（应该是这样）。

要执行此操作，您必须将opacity: 0;课程中的.sub-menu替换为：display: none;

然后更改opacity: 1;中的代码#nav_menu li:hover .sub-menu：display: block;（在我之前提供的代码中）。

使用opacity处理它会更清晰。

CSS下拉菜单不起作用？

1 个答案: