어떻게하면 내 하위 링크/텍스트를 가로로 표시 할 수 있습니까?

Question

나는 아름답게 작동하는 드롭 다운이있는 탐색 모음이 있습니다. 내가 바꾸려고하는 유일한 것은, 당신이 메인 링크 위로 마우스를 가져갈 때, 서브 링크/텍스트가 서로의 위에있을 때입니다. 나는 그들이 수평으로 표시되기를 원한다. 나는 여기에

는 HTML의 일부입니다 ... 바늘 및 디스플레이 인라인 등의 모든 종류의 시도 :

#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

이러한 변경은 어떻게해야 : 여기

<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 { 
    /* 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; 
} 

그들이하는 일은 드롭 다운을 일으키는 모든 블록 요소를 다우로 설정하는 것입니다. n 메뉴가 수평이되도록 플로팅하는 요소를 인라인합니다.

또한 위치 제어를 <a> 요소로 이전했습니다. 이렇게하면 텍스트 만이 아니라 링크의 전체 영역을 클릭 할 수 있습니다.

위의 방법으로 문제가 해결되지 않으면 HTML 또는 개발 링크를 게시하여 진행 상황을 확인하십시오.