I can't get my submenu to stay/appear on the same line as its parent. I want it to be located within the transparent band that appears via mouse-over. I'm new to this, any advice is greatly appreciated.
Jsfiddle: http://jsfiddle.net/kn4Jx/
Exhibition should have a submenu with two links Current and Previous.
html:
<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>
and css:
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;
}
Two small mistakes:
.submenu
absolutely positioned to right
with 900px
- so it's somewhere next to your monitor. Change it from right
to left
and number 900px
to 120px
inline-block
instead of inline
JSFiddle: http://jsfiddle.net/kn4Jx/4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.