为新 html 菜单调整 css 文件

Question

这可能有点复杂，但我真的需要一些帮助..

我为它制作了一个 HTML 菜单和一个 css 文件。这是我网站的桌面版。

我需要一个移动菜单，由于我的 html 和 css 技能不高，我请朋友为菜单制作了一个移动 css 文件。

他最终更改了原始 HTML 菜单的一些代码，这意味着移动版本可以正常工作，但我必须稍微更新一下原始 css 桌面文件.

这就是问题所在，我无法完成，我找不到正确的标签来更新文件。

原始桌面HTML菜单和css文件

body {
        font-family: Raleway;
        margin: 0;
    }

    main {
        margin: 0 auto;
        width: 1280px;
    }

    /*Menu*/

    ul.menu {
        margin-bottom: 50px;
    }

    label.show-menu {
        display: none;
    }

    input.show-menu {
        display: none;
    }


a:visited {
        border: none;
        color: black;
        text-decoration: none;
    }
ul.menu > ul {
    margin-left: 80px;
    border: none;

}
ul.menu > ul li
 {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    margin-left: 80px;
}
ul.menu > ul {
    position: relative;

}
ul.menu > ul li {
    font-size: 30px;
    min-height: 1px;
    line-height: 1.3em;
    padding: 10px;
}
ul.menu > ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}
ul.menu > ul ul li {
    float: none;
    font-size: 20px;
    margin: 30px;
}

ul.menu > ul li:hover {
    border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
    visibility: visible;
}


ul.menu ul > li > ul > li {
    margin: 0 10px 0 0;
    position: relative;
    padding: 0;
    float: left;
}
ul.menu ul > li > ul > li > a {
    padding: 10px 20px 10px 10px;
    display: block;
}

 #Logo {
        float: left;
        display: inline-block;
        position: absolute;
        width: 56px;
        height: 79px;
    }

<header>
        <label for="show-menu" class="show-menu">Menu</label>
        <input type="checkbox" id="show-menu" class="show-menu" role="button">

        <div id="Logo"><img src="Images/logo.png" alt="logo"></div>
        <nav id="primary_nav_wrap">
            <ul id="menu" class="menu">
            <ul>
                <li class="current-menu-item"><a href="#">home</a></li>
                <li><a href="#">informatie</a>
                    <ul id="navinformatie">
                        <li><a  href="#">algemene info</a></li>
                        <li><a href="#">wijken</a></li>
                        <li><a href="#">goed om te weten</a></li>
                    </ul>
                </li>
                <li><a href="#">verblijf</a>
                    <ul id="navverblijf">
                        <li><a href="#">hotels</a></li>
                        <li><a href="#">hostels</a></li>
                    </ul>
                </li>
                <li><a href="#">bezienswaardigheden</a>
                    <ul id="navbezienswaardigheden">
                        <li class="dir"><a href="#">toers</a></li>
                        <li class="dir"><a href="#">entertainment</a></li>
                        <li class="dir"><a href="#">musicals</a></li>
                        <li class="dir"><a href="#">sport</a></li>
                    </ul>
                </li>
            </ul>
                </ul>
        </nav>
        </header>

新的 HTML 菜单和移动 css 文件

body {
        margin: 0;
    }

    main {
        margin: 0 auto;
        width: 480px;
    }

    /*menu*/

    ul{
        list-style-type:none;
        margin:0;
        padding:0;
        position: static;
        display: none;
    }

    li {
        display:inline-block;
        float: left;
        margin-right: 1px;
        border-bottom:1px solid #CCC;
    }

    li a {
        display:block;
        min-width:180px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: black;
        background: white;
        text-decoration: none;
    }

    li:hover a {
        border-bottom: 1px solid black;
    }

    li:hover ul a {
        background: #f3f3f3;
        color: #2f3036;
        height: 40px;
        line-height: 40px;
    }

    /*Hover state for dropdown links*/
    li:hover ul a:hover {
        border-bottom: 1px solid black;
    }

    /*Hide dropdown links until they are needed*/
    li ul {
        display: none;
    }

    /*Make dropdown links vertical*/
    li ul li {
        display: block;
        float: none;
    }

    li ul li a {
        width: auto;
        min-width: 100px;
        padding: 0 20px;
        text-align:center;

    }


    ul li a:hover + .hidden, .hidden:hover {
        display: block;
    }

    #Logo {
        display: none;
    }

    .show-menu {
        text-decoration: none;
        color: white;
        background: black;
        text-align: center;
        padding: 10px;
        display: block;
    }

    input[type=checkbox]{
        display: none;
    }

    input[type=checkbox]:checked ~ #menu{
        display: block;
    }


    ul li, li a {
        width: 100%;
        text-align:left;
    }
    ul li a{
        padding:0 10px;
    }

    li ul li a {
        text-align:center;
    }

<header>
     <label for="show-menu" class="show-menu">Menu</label>
        <input type="checkbox" id="show-menu" role="button">

        <div id="Logo"><img src="logo.png" alt="logo"></div>
            <ul id="menu" class="mobile-top">
                <li class="current-menu-item"><a href="#">home</a></li>
                <li><a href="#">informatie</a>
                    <ul class="hidden">
                        <li><a  href="#">algemene info</a></li>
                        <li><a href="#">wijken</a></li>
                        <li><a href="#">goed om te weten</a></li>
                    </ul>
                </li>
                <li><a href="#">verblijf</a>
                    <ul class="hidden">
                        <li><a href="#">hotels</a></li>
                        <li><a href="#">hostels</a></li>
                    </ul>
                </li>
                <li><a href="#">bezienswaardigheden</a>
                    <ul class="hidden">
                        <li class="dir"><a href="#">toers</a></li>
                        <li class="dir"><a href="#">entertainment</a></li>
                        <li class="dir"><a href="#">musicals</a></li>
                        <li class="dir"><a href="#">sport</a></li>
                    </ul>
                </li>
            </ul>
        </header>
        <div style="clear:both;"></div>

所以我现在需要一些帮助来将桌面 css 文件调整到新的 html 菜单，我不知道从哪里开始以及我应该更改什么。

Answer 1

您可能希望使用媒体查询为移动设备和桌面设备应用一组不同的 CSS。你可以像这样包装你原来的css，当宽度大于600px时只应用桌面CSS。

@media (min-width: 600px) {
  body {
        font-family: Raleway;
        margin: 0;
    }

    main {
        margin: 0 auto;
        width: 1280px;
    }

    /*Menu*/

    ul.menu {
        margin-bottom: 50px;
    }

    label.show-menu {
        display: none;
    }

    input.show-menu {
        display: none;
    }


a:visited {
        border: none;
        color: black;
        text-decoration: none;
    }
ul.menu > ul {
    margin-left: 80px;
    border: none;

}
ul.menu > ul li
 {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    margin-left: 80px;
}
ul.menu > ul {
    position: relative;

}
ul.menu > ul li {
    font-size: 30px;
    min-height: 1px;
    line-height: 1.3em;
    padding: 10px;
}
ul.menu > ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}
ul.menu > ul ul li {
    float: none;
    font-size: 20px;
    margin: 30px;
}

ul.menu > ul li:hover {
    border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
    visibility: visible;
}


ul.menu ul > li > ul > li {
    margin: 0 10px 0 0;
    position: relative;
    padding: 0;
    float: left;
}
ul.menu ul > li > ul > li > a {
    padding: 10px 20px 10px 10px;
    display: block;
}

 #Logo {
        float: left;
        display: inline-block;
        position: absolute;
        width: 56px;
        height: 79px;
    }
}

为新 html 菜单调整 css 文件

Adjusting css file for new html menu

html

css

mobile

desktop

menu