Question

我尝试了许多不同的方法让顶级类别显示水平。我在SO和其他网站上找到了一些解决方案，每个建议都失败了。我知道它必须是简单的东西，我只是想念它。如何让菜单显示水平？

这是Jsfiddle http://jsfiddle.net/Simplypt/mTb5p/

这是CSS

enter code here<style type="text/css">
/*------------------------------------*\
    RESET
\*------------------------------------*/

*,
*:after,
*:before {
margin:0;
padding:0;
  box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
    }
    body {
font:400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background:#333;
    }

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.wrapper {
max-width:1280px;
margin:0 auto;
}
.header {
padding:15px 25px;
background:#FFF;
border-left:5px solid #2BA6CB;
overflow:hidden;
    }
.logo {
 float:left;
      }
.nav {
float:right;
margin:12px 0;
list-style:none;
    }
  .nav-link {

    }
  .nav-link a {
color:#2BA6CB;
text-decoration:none;
    }

/*------------------------------------*\
    EDIT BELOW FOR LAYOUT
\*------------------------------------*/



/*------------------------------------*\
   Clickable Dropdown
\*------------------------------------*/

body {
margin:0px;
}
.click-nav {
  display:inline-block;
margin:0px;
width:50px;
}

.click-nav .clicker {
display:inline-block;
  width: 100px;
}   

.click-nav li {
display:inline-block;
margin: 2% 0;
padding: 1% 0;

  }

/*.click-nav li {  
float: left;
margin: 2%;
padding: 1% 0;
list-style-type: none;
}*/         


.click-nav ul {
font-weight:900;
margin: 0;
 padding: 0;
 }
.click-nav ul li {
position:relative;
list-style:none;
cursor:pointer;
 }
.click-nav ul li ul {
left:0;
right:0;
width: 250px;
}
.click-nav ul .clicker {
background:#2284B5;
color:#FFF;
}
.click-nav ul .clicker:hover,
.click-nav ul .active {
background:#196F9A;
}

.click-nav ul li a {
 transition:background-color 0.2s ease-in-out;
-webkit-transition:background-color 0.2s ease-in-out;
 -moz-transition:background-color 0.2s ease-in-out;
display:inline-block;
background:#FFF;
 color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
 display:none;
}
.click-nav .no-js:hover ul {
display:inline-block;
}
</style>

这是标记的片段。

 <div class="click-nav">
<ul class="no-js">
<li><a href="#" class="clicker">Barter / Rental</a>
    <ul>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&   
do=view&ext=main&action=skill&ref=Equiptment">Equiptment</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Housing">Housing</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Other">Other</a></li>
    </ul>
</li>
<li><a href="#" class="clicker">Business</a>
    <ul>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Admin%20Support">Admin Support</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Business%20Consulting">Business Consulting</a></li>
    <li><a href="http://supplyordemand.com/index.php?name=freelance&  
do=view&ext=main&action=skill&ref=Data%20Entry">Data Entery</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Finance">Finance</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Legal">Legal</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Management">Management</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Marketing">Marketing</a></li>
        <li><a href="http://supplyordemand.com/index.php?name=freelance&
do=view&ext=main&action=skill&ref=Sales">Sales</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

这是Jquery代码

enter code here<script src="http://www.supplyordemand.com/jquery-1.9.1.min.js"     
type="text/javascript"></script>

 <script type="text/javascript">    
  $(function () {
 $('.click-nav > ul').toggleClass('no-js js');
 $('.click-nav .js ul').hide();
 $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
});
$(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
        $('.click-nav .js ul', this).slideUp();
        $('.clicker').removeClass('active');
    }
});
</script>

Answer 1

这里最大的问题是你的代码有点乱。尝试清理一下，以便于阅读;它将创造一个与众不同的世界。

这是你的问题：

.click-nav {
  display:inline-block;
  margin:0px;
  width:50px;
}

.click-nav是导航的父元素。这是将click-nav设置为50px的静态宽度。删除它，主导航切换到水平。

当然，在此之后它仍然需要额外的修复，但它是一个开始。

无法使此下拉菜单中的顶级类别变为水平。

1 个答案: