Javascript 带有水平子菜单和半透明带的CSS垂直导航菜单
我无法使子菜单与其父菜单保持/显示在同一行。我希望它位于通过鼠标悬停显示的透明带内。我是新手,任何建议都非常感谢 Jsfiddle: 展览应有一个子菜单,其中包含“当前”和“以前”两个链接 html: 两个小错误:Javascript 带有水平子菜单和半透明带的CSS垂直导航菜单,javascript,jquery,css,navigation,Javascript,Jquery,Css,Navigation,我无法使子菜单与其父菜单保持/显示在同一行。我希望它位于通过鼠标悬停显示的透明带内。我是新手,任何建议都非常感谢 Jsfiddle: 展览应有一个子菜单,其中包含“当前”和“以前”两个链接 html: 两个小错误: 您的。子菜单绝对位于右侧,使用 900px-所以它就在你的显示器旁边。从 righttoleft和number900pxto120px 子菜单中的列表项应显示为inline block,而不是inline JSFiddle:谢谢!这非常有效。有一件事,当我将鼠标移到“当前”和“先前”
。子菜单
绝对位于右侧
,使用
900px
-所以它就在你的显示器旁边。从
right
toleft
和number900px
to120px
inline block
,而不是inline
JSFiddle:谢谢!这非常有效。有一件事,当我将鼠标移到“当前”和“先前”子菜单上时,半透明条会断裂,有没有办法保持连续?
<div>
<ul id="mainmenu">
<li id="liHome">
<a href="#item-x1y1" class="maintextcolour" rel="none" id="Home">INFO</a>
</li>
<li id="liServices" class="active">
<a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2" id="Services">EXHIBITIONS</a>
<ul id="SubMenuY2" class="submenu">
<li><a href="#" class="maintextcolour">CURRENT</a></li>
<li><a href="#" class="maintextcolour">PREVIOUS</a></li>
</ul>
</li>
<li id="liEnvironment">
<a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment">CV</a>
</li>
<li id="liCareer">
<a href="#item-x1y4" class="maintextcolour" rel="none" id="Career">NEWS</a>
</li>
<li id="liContact">
<a href="#item-x1y5" class="maintextcolour" rel="none" id="Contact">MORE</a>
</li>
</ul
</div>
body
{
background-color:#06F;background-size: 100%;
background-repeat:no-repeat;
}
#mainmenu
{
margin: 0;
padding: 0;
list-style-type: none;
position:relative;
}
#mainmenu li
{
clear: left;
position:relative;
}
#mainmenu a
{
display: block;
overflow: hidden;
float: left;
width:100%;
position:relative;
}
#mainmenu a:hover
{
background-position: 0 0;
background-color:clear;
background-color:rgba(255,255,255,0.5);
width:100%;
}
#mainmenu li.active a
{
background-position: 0 0;
background-color:clear;
width:100%;
}
.submenu
{
list-style-type: none;
float: left; display: none;
position:absolute;
right:900px;
top:0px;
}
#mainmenu li a:hover+.submenu, .submenu:hover
{
display:inline-block;
}
.submenu li
{
display: inline;
clear: none !important;
}
.submenu li a
{
float: right;
margin-left: 10px;
}
.maintextcolour
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#FFF;
text-decoration: none;
}
.maintextcolour:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#0FF;
text-decoration: none;
}