html - 显示时如何使我的子链接/文本水平？

Question

我有一个带下拉菜单的导航栏，效果很好。我唯一想改变的是，当您将鼠标悬停在主链接上时，子链接/文本位于彼此之上。我希望它们水平显示。我已经尝试了各种 float 和显示内联等...

这是 HTML 的一部分:

<ul id="top_main_nav" style="float:left;">
                    <li><a href="Profile.php?id=<?php echo $auth->id; ?>">Me</a>
                        <ul>
                        <li><a href="Profile.php?id=<?php echo $auth->id; ?>"><?php echo ($auth->first_name); ?> <?php if(strlen($auth->last_name) > 6) { echo substr(strtoupper($auth->last_name),0,6) . "..."; }else{ echo ($auth->last_name); } ?></a></li>
                        <li><a href="EditProfile.php">Edit My Profile</a></li>
                        <li><a href="MySettings.php">Settings</a></li>
                        <li><a href="EmailSettings.php">Email Settings</a></li>

                        </ul>
                    </li>
</ul>

这是CSS:

#user_nav_future { 
    margin: 0 auto; 
    font: bold 12px Arial,Helvetica, sans-serif; 
    color: #fff; 
}

#user_nav_future ul li { 
    list-style: none; 
    float: left;
}

#user_nav_future ul li a {
    color: #fff; 
    padding: 10px; 
    display: block; 
    text-decoration: none;
}

#user_nav_future li ul {
    display: none;
    position: absolute; 
    top: 35px; 
    right: 160px; 
    z-index: 1001; 
    margin: 0; 
    padding: 0;
}

#user_nav_future li ul a { 
    color: #666; 
    display: inline; 
    float: left;
}

#user_nav_future ul li a:hover { 
    color: #FF4800;
}

#user_nav_future ul { 
    padding:0; 
    margin:0; 
    list-style:none;
}

#user_nav_future li { 
    float:left; 
    position:relative; 
    text-align:center;
}

#user_nav_future li ul { 
    display:none; 
    position:absolute; 
    top:34px; 
    left:0;
}

#user_nav_future li ul li { 
    width:160px;
}

#user_nav_future li:hover ul,#user_nav li.over ul { 
    display:block;
}

Answer 1

这些更改应该可以解决问题:

#user_nav_future { 
    margin: 0 auto; 
    font: bold 12px Arial,Helvetica, sans-serif; 
    color: #fff; 
}

#user_nav_future ul {
    /* Reset padding / margins on <ul>.  Add back in as necessary. */
    padding: 0;
    margin: 0;
    list-style: none; 
}

#user_nav_future ul li {
    /* Take <li> out of the picture - everything is now being dictated by nested <a> */   
    padding: 0;
    margin: 0;     
    display: inline;
}

#user_nav_future ul li a {
    /* whatever width you want each link to be.  Since you've got 10px of left/right padding, true element width will be 180px */
    width: 160px; 
    padding: 10px;  
    float: left;

    position: relative; 
    text-decoration: none;
    text-align: center;

    color: #fff; 
}

#user_nav_future li ul a { 
    color: #666; 
}

#user_nav_future ul li a:hover { 
    color: #FF4800;
}

#user_nav_future li ul { 
    display: none; 
    position: absolute; 
    top: 34px; 
    left: 0;
}

#user_nav_future li:hover ul,#user_nav li.over ul { 
    display: block;
}

他们正在做的是将导致下拉菜单向下移动的所有 block 元素设置为 float 的内联元素，因此菜单是水平的。

我还将定位控制转移到了 <a>元素。这样，链接的整个区域都可以点击，而不仅仅是文本。

如果以上方法对您不起作用，请发布您的一些 HTML 或开发链接，以便我们了解发生了什么。