文章/答案/技术大牛

发布

社区首页 >问答首页 >调整子导航下拉菜单的位置

问调整子导航下拉菜单的位置
EN

Stack Overflow用户

提问于 2020-05-01 19:39:43

回答 2查看 150关注 0票数 0

这里是新的，编码是新的--我试过了，但仅此而已。自从我最后一次接触任何形式的代码已经6年了。

我试着复制一个练习网站，我有一个导航器和一个下降式导航器。我遇到的问题是让子导航下拉到它的链接下面。我将附上示例和代码。任何帮助都是非常感谢的。请随时纠正你认为合适的任何事情--我刚刚重新开始，我宁愿知道正确的方法，也不愿继续做任何不好的做法。我也可以用子导航做我想做的事，但是这是用负值px的左右元素，我不想这样做。

它是如何看起来的，：

示例

我是怎么做到的，：示例1

示例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;
}

html

css

dropdown

styling

回答 2

Stack Overflow用户

发布于 2020-05-01 19:58:29

我想这就是你想要的。您希望更改当top是:hover时出现的ul的#nav值。

只需将您的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;
}

<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 class="subDropdown">
                                    <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>

票数 0

Stack Overflow用户

发布于 2020-05-01 20:16:17

因此，您想要做的是有一个li元素，它有一个子元素，它封装了它的链接。

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>

下拉菜单。见代码。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61549570

复制

相似问题

问调整子导航下拉菜单的位置
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整子导航下拉菜单的位置EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整子导航下拉菜单的位置
EN