菜单左，右键菜单

想有2个菜单一个在左，一个在右，但因为我的右键菜单会向左不能真正完成这个任务，我的CSS文件菜单左，右键菜单

body 
{ 
    color: #FFFFFF; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    background: #141414 url('/public/images/background/body_bg.png') top left repeat; 
    font: 12px Tahoma,Arial,Hevetica,Sans-serif; 
    font-size: 12px; 
    padding: 10px; 
} 

.left-menu, .right-menu 
{ 
    position: absolute; 

    text-align: center; 
    text-decoration: none; 
    top: 197px; 
    width: 128px; 
    max-width: 128px; 
} 

.left-menu ul, .right-menu ul 
{ 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    display: block; 
    text-align: left; 
} 

.left-menu ul li.header, .right-menu ul li.header 
{ 
    line-height: 29px; 
    height: 29px; 
    color: white; 
    background-image: url('/public/images/background/head.jpg'); 
    font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif; 
    padding: 6px 0 0 10px; 
    margin: 0; 
    border-bottom: 1px solid #000000; 
    border-right: 1px solid #000000; 

} 

.left-menu ul li a, .right-menu ul li a 
{ 
    background: #CD0000; 
    background: rgb(0,0,0); 
    background: rgba(0,0,0,0.6); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
    border: 1px solid #000000; 
    border-top: 0px; 
    height: 14px; 
    padding: 4px; 
    display: block; 
    text-decoration: none; 
    height: 14px; 
} 

.left-menu ul li a:hover, .right-menu ul li a:hover 
{ 
    color: #000000; 
    background-color: #ffffff; 
} 

a:visited 
{ 
    color: #ffcc00; 
    text-decoration: none; 
} 

a 
{ 
    color: #ffcc00; 
    text-decoration: none; 
} 

.title 
{ 
    position: static; 
    background: url('/public/images/background/title.jpg'); 
    height: 35px; 
    color: white; 
    font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif; 
    padding: 0 0 0 10px; 
    margin: 0; 
    border: 1px solid #000000; 
    border-top: 0; 
    line-height: 35px; 
    background-image: url('/public/images/background/title.jpg'); 
    background-position: left; 
    background-repeat: repeat-x; 
    margin-left: 140px; 
    margin-right: 140px; 
    text-align: center; 
} 

#header 
{ 
    align: middle; 
    position: static; 
    height: 183px; 
    max-height: 183px; 
    background-color: transparent; 
} 

table.hovertable 
{ 
    font-family: verdana,arial,sans-serif; 
    font-size: 11px; 
    color: #BDBDBD; 
} 

table.hovertable td 
{ 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    background-color: black; 
    height: 181px; 
    max-height: 181px; 
    text-align: center; 
    border-width: 1px; 
    padding: 0; 
    border-style: solid; 
    border-color: #290008; 
}

和我index.html的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <HEAD> 
     <link rel="stylesheet" href="{{ URL::to('/') }}/style/style.css" type="text/css" media="screen"> 
     <TITLE>PokemonGarden - Online Pokemon RPG</TITLE> 
    </HEAD> 
    <BODY> 
     <div class="header"> 
     <center> 
     <table align="center" class="hovertable"> 
     <tbody><tr> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     <td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td> 
     </tr> 
     </tbody></table> 
     </center> 
     </div> 
     <div class="left-menu"> 
     <ul> 
      <li class="header">Main menu</li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
     </ul> 
     </div> 
     <div class="title">Players Online - Past 5 minutes</div> 
     <div class="right-menu"> 
     <ul> 
      <li class="header">Main menu</li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
      <li><a href="profile.php">Homepage</a></li> 
     </ul> 
     </div> 
    </BODY> 
</HTML>

目前的设计应该是

1ST菜单 - 文本DIV - 二级菜单

但是，我的2ND菜单将进入1ST MENU的相同位置。

来源

2014-01-05 Alvaro Carvajal Nakosmai

你试过左边的菜单左边的浮动，然后右边的浮动他右键菜单？ –

是的，并没有工作。 –

把这个放在jsfiddle或等价物中，所以我们可以看一个现场示例 –

您正在为布局使用绝对定位。所以，你需要仔细指定左/右。如果你省略，它会默认选择左边。

只需添加到您的CSS：

.right-menu { right: 0px; }

检查小提琴：http://jsfiddle.net/m4j2v/

来源

2014-01-05 13:05:20 Abhitalks

试试这个在你的CSS：

.left-menu, .right-menu 
{ 
     text-align: center; 
     text-decoration: none; 
     top: 197px; 
     width: 128px; 
     max-width: 128px; 
} 
.left-menu{ 
     float:left; 
} 
.right-menu{ 
     float:right; 
}

或者看看下面的帖子：Float right and position absolute doesn't work together

来源

2014-01-05 13:06:53

菜单左，右键菜单

回答

相关问题