I have a drop down menu made with css and at the moment it has 5 li that are visable. When you hover over one of the li it highlights and then the drop down effect happens and the next ul shows underneath. So basically you have a first set of options to choose from and then when you hover over the first set of options you get a second set of options. What I would like to do is make a third set of options appear when you hover over the second set of options and make this third set of options appear to the right of the second options.
a link to exactly what i would like to do: http://cssmenumaker.com/menu/opera-drop-down-menu
Here is my html. Note the descriptions of the li are not final i will change what i want the links to say later.
<li><a href="#">Home</a>
<ul class="subforums">
<li><a href="#">Elite's</a></li>
<li><a href="#">Newbs</a></li>
<li><a href="#">Subscribers</a></li>
</ul>
</li>
<li><a href="#">Samples</a>
<ul class="subsites">
<li><a href="#">Architecture</a></li>
<li><a href="#">Furniture</a></li>
</ul>
</li>
<li><a href="#">Workshop</a>
<ul class="subcontactus">
<li><a href="#">By Phone</a></li>
<li><a href="#">By e-mail</a></li>
<li><a href="#">By Text</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="subabout">
<li><a href="#">The Team</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Goal</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="subsignup">
<li><a href="#">Find Out More</a></li>
<li><a href="#">Costs</a></li>
<li><a href="#">Paying Methods</a></li>
</ul>
</li>
</ul>
` note: there is a ul opening tag before all of the html that i have just posted but it wouldn't let me have it on here for some reason.
and the css:
navmenu is the id for the opening ul of the whole drop down menu `#navmenu, #navmenu ul{ list-style-type: none; }
#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}`#navmenu, #navmenu ul{
list-style-type: none;
}
#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}
I hope you can understand this and help me out. I have tried to be as clear as possible thankyou for reading. :)
you need to add these calsses to your css:
ul#navmenu li ul li ul {
list-style-type: none;
position: absolute;
display: none;
left: 0;
margin: -26px 0 0 127px;
padding: 0;
}
ul#navmenu li ul li:hover ul {
display: block;
}
you can see your code on JSFiddle
If means anything to you I made this FIDDLE couple of days ago for similar question
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Link 2</a>
<ul class="submenu">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
<li><a href="#">Link 2.5</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul class="submenu">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<li><a href="#">Link 3.4</a></li>
<li><a href="#">Link 3.5</a>
<ul class="sub-submenu">
<li><a href="#">Link 3.5.1</a></li>
<li><a href="#">Link 3.5.2</a></li>
<li><a href="#">Link 3.5.3</a></li>
<li><a href="#">Link 3.5.4</a></li>
<li><a href="#">Link 3.5.5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
#menu {
background: #333;
width: 960px;
margin: 0 auto;
height: 30px;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
}
#menu ul li a {
display: block;
height: 25px;
padding: 5px 10px 0 10px;
font-family: Verdana;
font-size: 16px;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 1px 1px 0 #252525;
transition: all 0.2s linear;
}
#menu ul li a:hover {
background: #555;
color: #00aeff;
}
#menu ul li .submenu {
background: #333;
position: absolute;
display: none;
top: 46px;
margin-left: 0;
padding: 0;
width: 150px;
}
#menu ul li:hover .submenu {
display: block;
}
#menu ul li .submenu li {
margin-bottom: 5px;
width: 100%;
}
#menu ul li .submenu li .sub-submenu {
background: #333;
position: absolute;
display: none;
left: 0;
margin: -30px 0 0 150px;
padding: 0;
width: 150px;
}
#menu ul li .submenu li:hover .sub-submenu {
display: block;
}
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.