Question

我创建了一个带水平子菜单的下拉菜单。这是我正在从客户处理的一个项目，我正在使用平面设计师的设计。

这是HTML ...

<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
    <a href="#">Accommodation</a>
    <!--Subnav Starts Here-->
    <span>
        <a href="#">Subnav Link</a>
        <a href="#">Subnav Link</a>
        <a href="#">Subnav Link</a>
        <a href="#">Subnav Link</a>
        <a href="#">Subnav Link</a>
        <a href="#">Subnav Link</a>
    </span>
</li>
<li><a href="#">Hindelinis</a></li>
<li><a href="#">In House Spa</a></li>
<li><a href="#">Own A Lodge</a></li>
<li class="book-online"><a href="#">Book Online</a></li>
</ul>

这是css

.main-nav {
  background-color:#1e1e1e;
  height: 53px;
}
#topnav {
position: relative;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
#topnav li {
 float: left;
 margin: 0;
 padding: 0;
}
#topnav li a {
    display: block;
    padding: 0 15px;
    height:53px;
    color: #fff;
    line-height:53px;
    text-decoration: none;
}
#topnav li:nth-child(3) {
   display:block;
   width:83px;
   height:53px;
   margin:15px;
   background-image:url('images/hindelinis.png');
   background-repeat:no-repeat;
   text-indent: 9999px;
   overflow:hidden;
 }
#topnav li:hover a {color:#f6f6f6;}
.book-online {
    background-color:#406340;
    color:#fff;
    margin-left:30px;
}
#topnav li span {
    display: none; /*--Hide by default--*/
    float: left;
    position: absolute;
    left: 0;
    top:53px;
    min-width: 900px;
    height:100px;
    color: #000;
}
#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
#topnav li span a { color:#000!important;display: inline; } 
.current-menu-item {display:block!important;}

我已将链接放到codepen中，以便您可以看到我到目前为止所拥有的内容。它在这里Codepen

我遇到了这种导航方式的一些问题。我希望你们这里的人能提供帮助。

我想将此导航推到右侧，而不会影响下面的子菜单。

我也相信有一种更好的方法可以对此进行编码，从而为我提供更大的灵活性，特别是在尝试使其具有响应性时。

由于其中的一些宽度声明，我发现很难在不完全更改CSS的情况下使其响应。

如果有人可以帮助，建议或指导对我有帮助的话。

在那一刻，我感觉太喜欢自己的喜欢，我希望它能更干净，更灵活。

任何帮助都会很棒

由于

丹

Answer 1

给.main-nav类一个浮点数：右;属性。

具有水平子导航的响应式下拉菜单

1 个答案: