如何在css和html中将两个nav元素彼此分开？

Question

我有两个nav元素，我在头下方使用一个，另一个是将nav元素嵌套在aside元素内的元素。我在页面底部为nav元素添加了HTML代码，并为nav元素添加了CSS代码。我也有你们可以浏览的网站图片，它也位于页面底部。我想做的是为一个nav元素添加一个水平导航栏，为另一个nav元素添加一个垂直导航栏，但是我创建的第一个nav元素覆盖了我的第二个nav元素的CSS。我试图找出一种将两者分开的方法，以便第二个nav元素具有自己的CSS代码。我不知道是否可以对第二个nav元素使用class属性或id属性，以便它与我创建的第一个nav元素分开。我真的可以使用一些帮助来解决此问题。

这是第一个nav元素的HTML代码：

    <nav>
        <ul>
            <li>
                <a class="current" 
                href="index7.html">Home</a>
            </li>
            <li>
                <a href="#">Product List</a>
            </li>
            <li>
                <a href="#">Personal</a>
            </li>
            <li>
                <a href="#">Decoration Ideas</a>
                <ul class="submenu">
                    <li>
                        <a href="#">Outdoor</a>
                    </li>
                    <li>
                        <a href="#">Indoor</a>
                    </li>
                    <li>
                        <a href="#">Table</a>
                    </li>
                    <li>
                        <a href="#">Treats</a>
                    </li>
                </ul>
            </li>
            <li>               
                <a href="#">Join Email</a>       
            </li>
        </ul>
    </nav>

here is the HTML code for the second nav element:

    <aside>
        <nav id="nav_list">    
            <ul>
                <li><a href="props.html">Props</a></li>
                <li><a href="costumes.html">Costumes</a></li>
                <li><a href="effects.html">Special Effects</a></li>
                <li><a href="masks.html">Masks</a></li>
            </ul> 
        </nav>
        </aside>

这是第一个和第二个nav元素的CSS代码

    /* nav styles */
    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    }
    nav ul > li {
    float: left;
    }
    nav a {
    display: block;
    width: 160px;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    background-color: #000000;
    color: white;
    font-weight: bold;
    }
    .current {
    color: orange
    }
    .submenu {
    position: absolute;
    display: none;
    top: 3em;
    }
    .submenu li {
    float: none; 
    }
    .submenu a:hover {
    background-color: gray;
    }
    nav ul li:hover > ul {
    display: block;
    } 

    /* second nav element */
#nav_list ul {
    list-style-type: none;
    margin-left: 1.25em;
    margin-bottom; 1.5em;
}
#nav_list ul li {
    width: 200px;
    margin-bottom: .5em;
    border: 2px solid blue; 
}

website right here

Answer 1

您可以使用类将它们分开：

HTML:

<nav class="h-nav"></nav>
<nav class="v-nav"></nav>

CSS：

    /* nav styles */
    .h-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    }
    .h-nav ul > li {
    float: left;
    }
    .h-nav a {
    display: block;
    width: 160px;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    background-color: #000000;
    color: white;
    font-weight: bold;
    }
    .current {
    color: orange
    }
    .submenu {
    position: absolute;
    display: none;
    top: 3em;
    }
    .submenu li {
    float: none; 
    }
    .submenu a:hover {
    background-color: gray;
    }
    .h-nav ul li:hover > ul {
    display: block;
    } 

    /* second nav element */
    .v-nav ul {
    list-style-type: none;
    margin-left: 1.25em;
    margin-bottom; 1.5em;
    }
    .v-nav ul li {
    width: 200px;
    margin-bottom: .5em;
    border: 2px solid blue; 
    }