我正在尝试向左侧打开垂直菜单项,现在它在右侧打开,但我希望它应该在左侧打开,
我怎么能实现这个目标? ,我写了以下事情来完成这件事
Css:
#navContainer
{
margin: 0;
padding: 0;
background: red;
border: 1px solid #7398ba;
text-align: center;
width: 220px;
}
#navContainer ul
{
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li
{
position: relative;
}
#navContainer ul li span
{
display: block;
}
#navContainer ul li a
{
text-decoration: none;
color: white;
display: block;
padding: 8px;
}
#navContainer ul li span:hover
{
/*background: pink;*/
}
#navContainer ul li a:hover
{
background: black;
}
#navContainer ul ul
{
position: absolute;
display: none;
}
#navContainer ul ul li a
{
background: #bec8cb;
}
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
left: 218px;
top: 0;
}
HTML: -
<div id="navContainer">
<ul>
<li><span><a href="#">Home</a></span></li>
<li>
<span><a href="#">About </a></span>
<ul>
<li><a href="#">Our business</a></li>
<li><a href="#">Our History </a></li>
</ul>
</li>
<li>
<span><a href="#">Services</a></span>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web templates </a></li>
<li><a href="#">Tutorials </a></li>
</ul>
</li>
<li><span><a href="#">Contact</a></span></li>
<li><span><a href="#">News</a></span></li>
</ul>
</div>
目前的结果: -
我想要的结果
答案 0 :(得分:0)
这次我和您有同样的问题,我用ul
包装div
元素来解决这个问题,并两次使用绝对位置。这样我才能达到这个结果。
left: 0
right: 0
代码示例:
<div class="parent">
<div>Trigger Dropdown</div>
<div class="wrapper">
<ul class="dropdown">
<li>foo</li>
<li>bar</li>
</ul>
</div>
</div>
.parent {
position: relative;
margin-left: 100px;
}
.dropdown {
background: red;
position: absolute;
top: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
}
答案 1 :(得分:-1)
只需在您的绝对定位中将left
更改为right
即可。在你的情况下:
变化:
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
left: 218px;
top: 0;
}
要:
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
right: 218px;
top: 0;
}
答案 2 :(得分:-1)
或者您可以将#navContainer ul li:hover ul
的像素从正值更改为负值
left: 218px
==&gt; left: -218px
/您的下拉列表的宽度为/ /
答案 3 :(得分:-1)
将left:218px
更改为 - 并将margin-left
更改为主navigation ul
#navContainer
{
margin: 0 0 0 218px;
padding: 0;
background: red;
border: 1px solid #7398ba;
text-align: center;
width: 220px;
}
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
left: -178px;
top: 0;
}
<强> DEMO
答案 4 :(得分:-1)
您需要将navContainer
向右移动,如:
#navContainer
{
margin: 0;
padding: 0;
background: red;
border: 1px solid #7398ba;
text-align: center;
width: 220px;
float: right;
}
然后在right
上使用left
属性而不是ul
属性
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
left: 218px;
top: 0;
}
答案 5 :(得分:-1)
#navContainer
{
margin: 0;
padding: 0;
background: red;
border: 1px solid #7398ba;
text-align: center;
width: 220px;
position:relative;
float:right;
}
#navContainer ul
{
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li
{
position: relative;
}
#navContainer ul li span
{
display: block;
}
#navContainer ul li a
{
text-decoration: none;
color: white;
display: block;
padding: 8px;
}
#navContainer ul li span:hover
{
/*background: pink;*/
}
#navContainer ul li a:hover
{
background: black;
}
#navContainer ul ul
{
position: relative;
display: none;
}
#navContainer ul ul li a
{
background: #bec8cb;
}
#navContainer ul li:hover ul
{
width: 80%;
position: absolute;
display: block;
left: 218px;
top: 0;
margin-left:-380px;
}
<div id="navContainer">
<ul>
<li><span><a href="#">Home</a></span></li>
<li>
<span><a href="#">About </a></span>
<ul>
<li><a href="#">Our business</a></li>
<li><a href="#">Our History </a></li>
</ul>
</li>
<li>
<span><a href="#">Services</a></span>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web templates </a></li>
<li><a href="#">Tutorials </a></li>
</ul>
</li>
<li><span><a href="#">Contact</a></span></li>
<li><span><a href="#">News</a></span></li>
</ul>
</div>