水平子菜单

我想创建一个水平子菜单导航栏，当我将鼠标悬停在相应菜单项上方时，它出现在初始导航栏下方。我无法让dropbown子菜单显示为水平状态，并且在显示内容后乱七八糟：内联菜单和子菜单现在都混杂在一起。我已经发布了我的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>

来源

2015-10-19 toniitony

你们能通过https://jsfiddle.net/共享代码？所以可以运行它，可以看到实际问题？ –

在发布到jsfiddle之后，您也可以直接使用“发布HTML/CSS代码”按钮而不是“发布代码”在SO中发布类似内容，并且我们可以直接在SO上运行代码。 – Nelson

你的'html'代码在哪里？ – niyasc

请在下面找到更新的代码，希望它能够解决您的问题。让我知道你面对的任何进一步的问题。

#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>

来源

2015-10-19 18:41:49 CreativePS

这是你在做什么@tony – CreativePS

是的！谢谢！ – toniitony

@toniitony：如果您的问题已通过此解决，请投票并标记为适当的解决方案。谢谢 – CreativePS

回答

相关问题