水平子菜单

Question

水平子菜单

4

我想创建一个水平的子菜单导航栏，当我在适当的菜单项上悬停时，它将出现在初始导航栏下方。我无法使下拉子菜单水平显示，并且在使用display:inline后，顶部菜单和子菜单现在混在了一起。我已经发布了我的CSS代码如下。

#nav{
 margin: 0 ; padding: 0;
 text-align: center;}
#nav li {
 list-style: none;
 margin: 0 auto;
 position: relative;
 display: inline;}
#nav li a{
 padding: 1em 2em;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em;}


/*SubMenu*/
    #nav li ul{
     display: inline;
     position: relative;
     left: 0;
     padding: 0; margin:0 100;}
    #nav li:hover > ul{
    }
    #nav li ul li, #nav li ul li a{
     display: inline;}
    #nav li ul li{ 
     _display: inline; /* for IE5*/}
    #nav li ul li a{
      width: 150px;}

这是我的HTML代码。

   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>

- toniitony

1

你能否通过 https://jsfiddle.net/ 分享代码？这样我就可以运行它并查看实际问题了。 - Helping Hands

在将代码发布到 jsfiddle 后，您也可以直接使用“发布 HTML/CSS 代码”按钮而不是“发布代码”在 SO 上发布类似的内容，这样我们就可以在 SO 上实时运行代码。 - Nelson

你的 html 代码在哪里？ - niyasc

我已经添加了上面的HTML。我还制作了一个fiddle。https://jsfiddle.net/q2sxnta3/ 很酷的工具！感谢您的帮助。 - toniitony

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CreativePS · Accepted Answer

以下是更新后的代码，希望它可以解决你的问题。如果你遇到任何其他问题，请告诉我。

#nav{
 margin: 0 ; padding: 0; position:fixed; width:100%; background:#e7e7e7}
#nav li {
 list-style: none;
 display: inline-block; float:left}
#nav li a{
 padding:10px 20px;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em; background:#e7e7e7;}
#nav li a:hover{background:#bababa;}
/*SubMenu*/
#nav li:hover ul{display:block;position:absolute; top:43px; width:100%; left:0px; background:#bababa;}
#nav li ul{
 display: none;}
#nav li:hover ul li, #nav li:hover ul li a{
 display: inline-block; float:left; padding:5px; background:#bababa}
#nav li ul li{ 
 _display: inline-block; /* for IE5*/}
#nav li ul li a{
  width: 150px;}

   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>