Question

这里是新功能，也是编码的新功能-我涉猎了，仅此而已。我上次接触任何形式的代码已经6年了。

我正在尝试复制一个网站进行练习，并且拥有一个导航和一个下拉菜单。我遇到的问题是试图使sub nav下拉列表进入其所要链接的下方。我将附上示例和代码。任何帮助表示赞赏。请随时纠正您认为合适的任何内容-我刚刚重新开始，除了继续进行任何不良做法外，我想知道正确的方法。我也可以用sub nav来做我想做的事，但是这是用我不想做的带有负px的左元素和右元素。

外观如何：

Example

到目前为止，我的理解： Example 1

Example 2

我也试图使箭头链接起来，如图所示。有人也知道如何正确修改宽度吗？

我的html：

 <!DOCTYPE html>
    <html lang="en">
        <head> 
             <meta charset="utf-8">
            <title>Arnold Clark &vert; New & Used Cars</title> 

            <link rel="stylesheet" type="text/css" href="style.css">


        </head> 
            <body>

                <div id="ac-header">
                        <a href="#"><img id="ac-logo" src="ac.png" alt="Arnold Clark logo" /></a>
                    <div id="nav">
                        <span>Find a car</span>
                            <div id="nav-Dropdown">
                                <p>
                                    <div style="font-weight: bold; font-size: 14px;">We sell</div>
                                </p>
                                <ul>
                                    <li><a href="#">Used cars</a></li>
                                    <li><a href="#">New cars</a></li>
                                    <li><a href="#">Nearly new cars</a></li>
                                    <li><a href="#">Car finance</a></li>
                                    <li><a href="#">Vans</a></li>
                                    <li><a href="#">Motability</a></li>
                                </ul>
                        </div>
                    </div>
                    <div id="nav">
                        <span class="pointer">Find a van</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Find a dealer</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Rental</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Servicing</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Other</span>
                            <div id="nav-Dropdown">
                                <ul>
                                    <div style="font-weight: bold;">
                                        <li>About Arnold Clark</li>
                                    </div>
                                </ul>
                            </div>
                    </div>
                </div>



                <div id="wrapper">

                    Content goes in here. 

                </div>
            </body>
    </html>

我的CSS：

    body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav > #nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav > #nav-Dropdown > ul {
    list-style-type: none;
    padding: 0; 
    margin: 0;
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 50px;
}

Answer 1

我想这就是你的追求。您想更改top为ul时显示的#nav的{{1}}值

只需将您的:hover更改为50px，它应该按照您的意图对齐。：）

58px

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}

body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav #nav-Dropdown ul {
    list-style-type: none;
    padding: 0; 
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}

Answer 2

所以您要做的是拥有一个li元素，该li元素具有一个child元素，该子元素将其中的链接包装为其

var dropdown = document.querySelector('.dropdownParent');

dropdown.onclick = function() {
  var target = document.getElementById(this.dataset.droptarget)
  target.classList.toggle('active');
}

ul {
display: flex;
list-style: none;
justify-content: space-around;
}

.dropdown {
  position: relative;
}

.dropdown #dropdownOne {
  position: absolute;
  left: 0;
  top: 30px;
  display: none;
  opacity: 0;
  transition: all 1s;
}

.dropdown #dropdownOne.active {
  opacity: 1;
  display: block;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="dropdown">
    <a class="dropdownParent" href="#" data-droptarget="dropdownOne">Item 3</a>
    <div id="dropdownOne">
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
    </div>
  </li>
  <li>Item 4</li>
</ul>

下拉菜单。查看代码。

调整subnav下拉菜单的位置

2 个答案: