Question

我有一个带有下拉的导航栏，工作得很漂亮。我唯一要改变的是，当你将鼠标悬停在主要链接上时，子链接/文本会在彼此之上。我希望它们水平显示。我尝试了各种花车并显示内联等......

以下是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;
}

他们正在做的是将导致下拉菜单的所有块元素设置为浮动的内联元素，使菜单处于水平位置。

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

如果以上内容对您不起作用，请发布一些HTML或开发链接，以便我们了解正在发生的事情。

如何在显示时使子链接/文本水平？

1 个答案: