logo标签列表

如何水平显示子菜单？

htmlcss
3

我有一个竖向显示的下拉菜单，如何将其改为水平显示？

我的css代码：

.menu-toggle{
    display:block;
    padding:10px;
    margin:20px 0 0;
    background:#666;
    color:#fff;
    cursor:pointer;
    text-transform:uppercase;
    font-size:20px;
}
.menu-toggle.toggled-on{
    background:#0099ff;
}
.srt-menu{
    display:none;
}  
.srt-menu.toggled-on{
    display:block;
    position:relative;
    z-index:10;
}
.srt-menu{
    clear:both;
    margin-bottom:60px;
}
.srt-menu li a {
    background:#dadada;
    display:block;
    margin:1px 0; 
    padding:10px;
    text-decoration:none;
}
.srt-menu li a:hover{
    background:#0099ff;
    color:#fff;
}
.srt-menu li li a {
    background:#e8e8e8;
    padding-left:40px;
}
.srt-menu li li li a {
    background:#efefef;
    padding-left:80px;
}
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {
margin:         0;
padding:        0;
list-style:     none;
}
.srt-menu ul {
position:       absolute;
display:none;
width:          12em; 
}
.srt-menu ul li {
 width:         100%;
 }
 .srt-menu li:hover {
 visibility:        inherit;  
 }
 .srt-menu li {
 position:      relative;
 margin-left:1px;
 }
.srt-menu li li {
 margin-left:0px;
 }
 .srt-menu a {
 display:       block;
 position:      relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
 display:block;
 left:          0;
 top:           45px; /* match top ul list item height */
 z-index:       99;
 -webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
 }
 ul.srt-menu li:hover li ul,
 ul.srt-menu li.sfHover li ul {
 top:           -999em;
 }
 ul.srt-menu li li:hover ul,
 ul.srt-menu li li.sfHover ul {
 left:          12em; 
 top:           0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
top:            -999em;
 }
 ul.srt-menu li li li:hover ul,
 ul.srt-menu li li li.sfHover ul {
 left:          10em; /* match ul width */
   top:         0;
}

我的HTML代码：

 <nav id="topnav" role="navigation">
     <div class="menu-toggle">Menu</div>  
     <ul class="srt-menu" id="menu-main-navigation">
         <li>
             <a>Contact</a>
             <ul>
                 <li><a href="#">Advertise with Us</a></li>
                 <li><a href="#">Contact Us</a></li>              
             </ul>
          </li> 
      </ul>     
  </nav>

感谢您的任何帮助。
4个回答
1

只需为 li 元素添加这两个属性的 css：

float:left;
margin-right:30px;
1

一种选择是删除width: 100%;，并将display: inline-block;添加到.srt-menu ul li。

编辑

您提供的新代码需要进行额外更改。 从.srt-menu ul中删除width: 12em，这将防止子li换行到新行。

.menu-toggle{
  display:block;
  padding:10px;
  margin:20px 0 0;
  background:#666;
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
  font-size:20px;
}
.menu-toggle.toggled-on{
  background:#0099ff;
}
.srt-menu{
  display:none;
  background-color: #dadada;
}  
.srt-menu.toggled-on{
   display:block;
   position:relative;
   z-index:10;
}
.srt-menu{
  clear:both;
  margin-bottom:60px;
}
.srt-menu li a {
  background:#dadada;
  display:block;
  margin:1px 0; 
  padding:10px;
  text-decoration:none;
}
.srt-menu li a:hover {
  background:#0099ff;
  color:#fff;
}
.srt-menu li li a {
   background:#e8e8e8;
   /*padding-left:40px; Removed to tidy up output*/
}
.srt-menu li li li a {
   background:#efefef;
   padding-left:80px;
}
.menu-toggle {
  display:none;
}
#menu-main-navigation {
  display:block;
}
.srt-menu, .srt-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.srt-menu ul {
  left: 0;
  position: absolute;
  display: none;
  white-space: nowrap; /*Add this to stop the li from wrapping onto new lines*/
/*width: 12em; Remove this to stop the list items from wrapping*/
}
.srt-menu ul li {
  display: inline-block;
/*width: 100%;*/
}
.srt-menu li:hover {
  visibility: inherit;  
}
.srt-menu li {
  display: inline-block; /*Add this to make parent li display inline*/
  position: relative;
}
.srt-menu li li {
  margin-left:0px;
}
.srt-menu a {
  display: block;
  position: relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
  display: block;
  left: 0;
 /*top: 45px;  removed to stop menu from disappearing when moving mouse to it*/
 z-index: 99;
 -webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul, ul.srt-menu li.sfHover li ul {
  top: -999em;
}
ul.srt-menu li li:hover ul, ul.srt-menu li li.sfHover ul {
  left: 12em; 
  top: 0;
}
ul.srt-menu li li:hover li ul, ul.srt-menu li li.sfHover li ul {
  top: -999em;
}
ul.srt-menu li li li:hover ul, ul.srt-menu li li li.sfHover ul {
  left: 10em; /* match ul width */
  top: 0;
}
<nav id="topnav" role="navigation">
  <div class="menu-toggle">Menu</div>  
  <ul class="srt-menu" id="menu-main-navigation">
    <li>
      <a href="#">Contact</a>
      <ul>
        <li><a href="#">Advertise with Us</a></li>
        <li><a href="#">Contact Us</a></li>              
      </ul>
    </li> 
    <li><a href="#">More</a></li>
  </ul>     
</nav>

菜单仍然是垂直形式。 - zaha
代码片段显示子菜单垂直输出，因此要么a）我没有理解您的目标是什么，要么b）由于某种原因，您看到了不同的结果。无论哪种方式，您都需要进一步阐述。您期望看到什么，您看到了什么？ - Hidden Hobbes
非常感谢您的帮助，真的非常感激。还有一个问题，如果我添加一个菜单，例如 <li><a href="#" target="_blank">More</a></li> 它将出现在联系菜单下面。按照正确的方式，它应该在联系菜单旁边。我该如何解决这个问题？ - zaha
我已经更新了我的答案。简而言之，您需要进行更多的更改，.srt-menu li 需要添加 display: inline-block; 以使 li 在一行中显示。因为父级 li 不再占据100％ 的宽度，所以您还需要在 .srt-menu ul 中添加 white-space: nowrap;，因为它现在会收缩到父级 li 的宽度。 white-space: nowrap; 将防止 li 换行到新行上。 - Hidden Hobbes
没问题。很高兴能帮忙。 - Hidden Hobbes
0

答案：


我认为这会有帮助。

nav  ul li ul li {
    float:  right;
     }
0

更新这个CSS并在此处演示https://jsfiddle.net/hzorn1m5/1/

.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {
margin:         0;
padding:        0;
list-style:     none;
}
.srt-menu ul {
position:       absolute;
display:none;
width:          12em; 
}
.srt-menu ul li {
 width:         100%;
 }
 .srt-menu li:hover {
 visibility:        inherit;  
 }
 .srt-menu li {
 position:      relative;
 margin-left:1px;
 }
.srt-menu li li {
 margin-left:0px;
 }
 .srt-menu a {
 display:       block;
 position:      relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
 display:block;
 left:          0;
 top:           45px; /* match top ul list item height */
 z-index:       99;
 -webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
 }
 ul.srt-menu li:hover li ul,
 ul.srt-menu li.sfHover li ul {
 top:           -999em;
 }
 ul.srt-menu li li:hover ul,
 ul.srt-menu li li.sfHover ul {
 left:          12em; 
 top:           0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
top:            -999em;
 }
 ul.srt-menu li li li:hover ul,
 ul.srt-menu li li li.sfHover ul {
 left:          10em; /* match ul width */
   top:         0;
}
 ul.srt-menu li:hover ul{
     width: 600px;
 }
 ul.srt-menu li ul li{
     display: inline-block !important;
    width: 48%;
 }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接