如何将下拉菜单放在导航栏中?

时间:2018-05-10 06:04:39

标签: html css html5

所以,我刚开始从w3school学习html。我已经开始了我的小项目,我将创建一个简单的网站。现在我不知道从导航栏创建下拉菜单了。我似乎无法将其放在导航栏中。 ps.I编辑了一些我认为不相关的代码。

    .topnav {
        overflow: hidden;
        padding-top: 6px;
        padding-bottom: 6px;
        margin: 0px;
    }
    .topnav h1 {
        text-align: center;
        font-size: 22px;
        color: #FFFFFF;
        margin: 0px;
    }
    .dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        float: left;
    }
    .show {
        display:block;
    }
</style>
</head>
<body>
    <div class="topnav">
        <h1>Home</h1>
        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Menu</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#content">Content</a>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

import React from 'react';
import store from "./Store";
import { Provider } from 'react-redux';
import Routes from "./Routes";
import {BrowserRouter} from 'react-router-dom';

class App extends React.Component
{

    render()
    {
        return (

            <Provider store={store}>
                <BrowserRouter>
                    <Routes/>
                </BrowserRouter>
            </Provider>

        )
    }
}

export default App;

http://jsfiddle.net/renukaSingh/njhwr4z2/