水平子菜单

Question

我想创建一个水平子菜单导航栏，当我将鼠标悬停在相应的菜单项上方时，它会出现在初始导航栏下方。我无法使 dropbown 子菜单显示为水平，在弄乱了 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>

Answer 1

请在下面找到更新后的代码，希望它能解决您的问题。让我知道您遇到的任何其他问题。

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

水平子菜单

Horizontal SubMenu

html

css

css-float