I need to create a Bootstrap 4 Sidebar Menu Dropdown, as the below (image).
I'm think about use Dropright buttons, I looking for good exemples of code, but unsuccessfully...
Could any one give me a starting point? Or A funtional exemple of menu like that, with bootstrap?
Bootstrap 4 SideMenu bar with Dropdown:
Run and check out this in full page mode.
html, body {
margin:0;
padding:0;
height:100%;
}
* {box-sizing: border-box;}
.container {
height:100% !important;
margin: 0 !important;
padding: 0 !important;
}
a {
color:#fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
padding:0px 0px 20px 0px;
width:100%;
display:block;
height:100%;
}
li {
padding:20px 20px 0 20px;
width:100%;
list-style-type: none;
color:#fff;
}
.container ul {height:100%;}
.container > ul {
width:250px;
background-color:#225fe8;
position:relative;
padding:0 !important;
overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
padding:0 !important;
width:250px;
background-color:#193d8e;
}
a:hover {
color: #fbfbfb !important;
}
i{
margin-top: 4px;
padding-left: 8px;
}
.container > ul > li:hover > ul {
display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-250px;
padding:0 !important;
top:0;
width:250px;
background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
padding:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<ul class="">
<li class="">
<a tabindex="-1" href="#">HOME <i class="fa fa-angle-right" style="font-size:20px"></i>
</a>
<ul class="">
<li class=""><a tabindex="-1" href="#">Locations</a></li>
<li class="">Strategy</li>
<li class="">Research</li>
<li class="">
Products <i class="fa fa-angle-right" style="font-size:20px"></i>
<ul class="parent">
<li >
<a href="#">
Product List
</a>
<ul class="child">
<li >Platforms</li>
<li > Funds</li>
<li >Wealth</li>
<li >Listed </li>
<li >Wealth </li>
<li >Listed</li>
<li >Listed </li>
</ul>
</li>
<li >Model Portfolios</li>
<li >Non-approved Locations</li>
</ul>
</li>
<li class="">Implementation</li>
</ul>
</li>
<li >Contact</li>
<li >Address</li>
<li >News</li>
</ul>
</div>
<script type="text/javascript">
$('.child').hide();
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>
check it whether it is ok or not.
Below some ajustments that I did to reach something closer to the image posted.
Thank you #Amaresh S M!
Trash:
removed tabindex -1 from html
removed i tag from css
removed the the jquery script (not necessary in this case)
In order to have a menu of 4 parts (3 dynamic and 1 fixed):
container changed from .container to .container-fluid,
to have the full width
the original container was changed to a col-9 (75% of the width)
all the .container in css was changed to col-9
was added a fixed col-3 on right (the static part of menu, 25% of the width)
each of the three parts of the col-9 has width 33.33%
the unique .row has 100% of the height
Important:
I created classes for the columns col-9 and col-3. Associate CSS to generic classes is not a good idea! This can affect the entire website.
.row-menu-full-width {
height: 100%;
}
.dynamic-part {
margin: 0 !important;
padding: 0 !important;
background-color: black;
float: left;
}
a {
color:#fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
padding:0px 0px 0px 0px;
width:100%;
display:block;
}
li {
list-style-type: none;
color:#fff;
padding-left: 30px;
}
.dynamic-part > ul {
width:33.33%;
height: 100%;
background-color:#225fe8;
position:relative;
padding:0 !important;
overflow:visible;
}
.dynamic-part > ul > li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul {
display:none;
position:absolute;
right:-100%;
top:0;
padding:0 !important;
width:100%;
background-color:#193d8e;
height: 100%;
}
a:hover {
color: #fbfbfb !important;
}
.dynamic-part > ul > li:hover > ul {
display:block;
}
.dynamic-part > ul > li > ul >li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-100%;
padding:0 !important;
top:0;
width:100%;
background-color:#112551;
height: 100%
}
.dynamic-part > ul > li > ul > li:hover ul {
display:block;
}
.dynamic-part > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
}
.static-part {
margin: 0 !important;
padding: 0 !important;
background-color: lightgray;
float: right;
}
<body>
<div class="container-fluid container-menu-full width">
<div class="row row-menu-full-width">
<div class="col-9 dynamic-part">
<ul class="">
<li class="">
HOME<i class="fa fa-angle-right" style="font-size:20px"></i>
<ul class="">
<li class="">Locations</li>
<li class="">Strategy</li>
<li class="">Research</li>
<li class="">
Products <i class="fa fa-angle-right" style="font-size:20px"></i>
<ul class="">
<li>
<a href="#">
Product List
</a>
</li>
<li>
<a href="#">
Product List
</a>
</li>
<li >Model Portfolios</li>
<li >Non-approved Locations</li>
</ul>
</li>
<li class="">Implementation</li>
</ul>
</li>
<li >Contact</li>
<li >Address</li>
<li >News</li>
</ul>
</div>
<div class="col-3 static-part">
fixed column
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
Related
I just want to add a vertical line between my categories and I don't know how.
Any ideas?
Here is the markup:
<style type="text/css">#import url(http://fonts.googleapis.com
/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:transparent repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ||ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:transparent repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 15px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:capitalize;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:0px}#cssmenu > ul > li:hover > a{background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:0px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(http://1.bp.blogspot.com/-hKJMJ6tutvA/UjqSigUJTSI/AAAAAAAABdA/EicRvUY_mlw/s1600/active.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://3.bp.blogspot.com/-V2tGyRV9wIY/UjqTVGOrmXI/AAAAAAAABdQ/XYS2v7U8DUI/s1600/highlight-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:50px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:10px 23px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:capitalize;width:150px;border-left:4px solid transparent;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 1.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li a:active{background:url(http://1.bp.blogspot.com/-fPLR6IIW7dU/UjqTVZksJTI/AAAAAAAABdU/EadZ1JqTCX8/s1600/menu-bg.png) repeat}</style><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><span>Αρχική</span></li>
<li class="has-sub"><span>Η Εταιρία</span>
<ul>
<li><span>Όραμα</span></li>
<li><span>Σημεία Συνεργασίας</span></li>
<li class="last"><a href="#"><span>Υποδομή</span>
</a></li>
<li><span>Δραστηριότητες</span></li>
<li><span>Σχετικά με εμένα</span></li>
</ul>
</li>
<li class="has-sub"><span>Ασφαλιστικά προϊόντα</span>
<ul>
<li><span>ΚΑΤΗΓΟΡΙΑ #1</span></li>
<li class="last"><span>ΚΑΤΗΓΟΡΙΑ #2</span></li>
</ul>
</li>
<li class="last"><span>Οι πελάτες μας</span></li>
<li class="last"><span>Καριέρα </span></li>
<li class="last"><span>Άρθρα</span></li>
<li class="last"><span>Φωτογραφίες</span></li>
<li class="last"><span>Επικοινωνία</span></li>
<li class="last"><span>Web Tv</span></li>
</ul>
</div>
Here is an example of what I am trying to do
http://lykourezoslawoffices.gr/
here is working code:
li {
float: left;
list-style-type: none;
border-left: 2px solid blue;
padding: 0 10px;
}
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
Demo:
https://jsfiddle.net/no5t2d9y/2/
Add a border-right style to your category, here's the sample working code
#cssmenu > ul > li {
border-right:2px solid #000;
}
#cssmenu > ul > li:last-child {
border-right:0px solid #000;
}
try this in css
.list li{ background:#ccc; position:relative; list-style:none; border-left:#666 solid 1px; padding:10px; }
I'm having some trouble with putting two ul's next to each other.
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
<div>
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
The problem that I'm getting now is that the <ul>'s drop down under each other, where I like them to be inline.
Has anyone a proper solution for the problem. I searched through other's questions about this topic, all methods did not work.
1 method:
you need 2 div
<div>
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
</ul>
</div>
<div>
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
</ul>
</div>
Css
div {
display:inline-block;
float:left;
}
Example: https://jsfiddle.net/d2q6kbnw/
2nd method, make your h and ul tag into inline tag using css...
display:inline-block; float:left;
Wrap each ul into a parent div and apply display: inline-block; and vertical-align: top; to them.
Here's a Fiddle to demonstrate.
You can wrap the headling/list groups in a div and float them left:
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
.wrapper {
float: left;
}
<div>
<div class="wrapper">
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
</div>
<div class="wrapper">
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
</div>
You create 2 div "left" and "right" :
<div class="left">
<h4>title</h4>
<ul>...<ul>
</div>
<div class="right">
<h4>title</h4>
<ul>...<ul>
</div>
.left,
.right{
display: inline-block;
vertical-align: top;
}
fiddle
You can do this:
CSS
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
div ul{
display: inline-block;
vertical-align: top;
}
HTML
<div>
<ul>
<h4>Website</h4>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
<ul>
<h4>Hosting</h4>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
DEMO HERE
The issue is that the h4 tags are block level elements. You would need to two wrap both lists in some sort of column div like so for the desired behavior:
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
div.column {
display: inline-block;
float: left;
}
<div>
<div class="column">
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
</div>
<div class="column">
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
</div>
I want to make a menu with different background color having a submenu and a nested submenu both with different background color . When I hover over submenu list then it should display nested submenu .How to do it ? . This is my code .
<html> <head> <title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
</style>
</head>
<body>
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
Here i have applied/fixed your codes for the menu you are trying to achieve. You can change Background Color and Font Color easily. Wish this work for you.
#horizontalmenu ul {
list-style: none;
padding: 0;
}
#horizontalmenu > ul:after{
clear:both;
content:"";
display:block;
}
#horizontalmenu > ul > li {
float: left;
position: relative;
border: 1px solid #CC55FF;
}
#horizontalmenu > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > a:hover {
background-color: lightgreen;
}
#horizontalmenu > ul > li > ul {
background-color:red;
display: none;
width:150px;
top:100%;
left:0;
position: absolute;
}
#horizontalmenu > ul > li > ul > li {
position: relative;
width:100%;
display: block;
}
#horizontalmenu > ul > li > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > ul > li > a:hover {
background-color:white;
}
#horizontalmenu > ul > li:hover > ul {
display: block;
}
#horizontalmenu > ul > li > ul > li > ul {
display:none;
background-color:lightblue;
position:absolute;
left:100%;
top:0;
width: 150px;
background-color: green;
}
#horizontalmenu > ul > li > ul > li > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > ul > li > ul > li > a:hover {
background-color:yellow;
}
#horizontalmenu > ul > li > ul > li:hover ul {
display: block;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National
</li>
<li>
International
</li>
<li>
Sport
</li>
<li>
Hollybood
</li>
</ul>
</li>
<li>
Technology
<ul>
<li>
IT/Software
</li>
<li>
Hardware
</li>
<li>
Iphone
<ul class="horizontal">
<li>
IT/Software
</li>
</ul>
</li>
<li>
Neuro-Science
</li>
</ul>
</li>
<li>
Sports
<ul>
<li>
Cricket
</li>
<li>
Tenis
</li>
<li>
Badminton
</li>
<li>
Hockey
</li>
</ul>
</li>
<li>
Country
<ul>
<li>
India
</li>
<li>
America
</li>
<li>
France
</li>
</ul>
</li>
</ul>
</div>
I've added additional styles. Hope it will help
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
#horizontalmenu li ul.horizontal {
display: none;
}
#horizontalmenu #horizontalmenu li:hover ul.horizontal {
display: block;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li><li>IT/Software 2</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
I have a menu drop down list which is done using css and html. Now, I want to have an extension of sub menu on the existing sub menu, when I hover the "Audit Report for example, it should show another sub menu vertically. How can I achieve that? This is my existing codes in css and html.
css
.menuPanel
{
width: auto;
height: 32px;
top: 5px;
border-bottom: 1px solid #808080;
background-color: #4f4545;
}
.nav,.nav ul
{
list-style: none;
margin:0;
padding:0;
}
.nav {
position:relative;
left: 2px;
height: auto;
}
.nav ul
{
height:0;
left:0;
overflow: hidden;
position:absolute;
}
.nav li
{
float:left;
position:relative;
}
.nav li a
{
-moz-transition:1.0s;
-o-transition:1.0s;
-webkit-transition:1.0s;
transition:1.0s;
background-color: #4f4545;
display: block;
color:#FFF;
text-decoration:none;
font-size:12px;
line-height:32px;
padding:0px 30px;
}
.nav li:hover > a
{
background: #8CCA33;
border-color: #6E67A6;
color:#fff;
}
.nav li:hover ul.subs
{
height:auto;
width: 250px;
z-index: 10;
}
.nav ul li
{
-moz-transition:0.3s;
-o-transition:0.3s;
-webkit-transition:0.3s;
opacity:0;
transition:0.3s;
width:100%;
}
.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
.nav ul li a
{
background: #4f4545;
border: 1px solid #808080;
color:#fff;
line-height:1px;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
.nav li:hover ul li a
{
line-height:32px;
}
.nav ul li a:hover
{
background:#8CCA33;
}
aspx page design
<ul class="nav">
<li>HOME</li>
<li>FILE ▾
<ul class="subs">
<li>Tenants List</li>
<li>Users List</li>
<li>Tenant Rental</li>
</ul>
</li>
<li>REPORTS ▾
<ul class="subs">
<li>Audit Reports
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li>Leasing Reports</li>
<li>Marketing Reports</li>
</ul>
</li>
<li id="admin" visible="true" runat="server">ADMIN ▾
<ul class="subs">
<li>System Logs</li>
<li>User Request</li>
</ul>
</li>
<li>LOG-OUT
</li>
</ul>
</div>
You have to do a new CSS-Style for .nav .subs ul for the whole block or .nav .subs ul li for a single element of the block
example:
.nav .subs li ul
{
max-height: 0;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
.nav .subs li:hover > ul
{
max-height: 300px;
height: auto;
}
.nav .subs li ul
{
left: 250px;
top: 0;
overflow: hidden;
}
this just shows the new block, if you hover over a submenu-item, now you only have to style it and place it whereever you want it
Example on JSFiddle:
http://jsfiddle.net/4sym7ry0/3/
Do Nested Unorderlist and orderedlist inside your ListItem
Check this For More Info :
http://www.thecodingguys.net/blog/css3-create-a-vertical-menu-with-sub-menu
I am working on this code its a type of menu, which sticks to the bottom of the screen. i wanted drop up menu on hovering over various items. but my problem is the submenus are increasing towards downwards where they should be increasing upwards.... here is my code please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Dropdown menu
</title>
<style type="text/css">
body{
padding: 3em;
}
#menu ul {
font: 12px georgia;
list-style-type:none;
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background:#E3E4FA;
}
#menu ul li ul li {
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:#E3E4FA;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background:#E3E4FA;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
padding-bottom:13px;
}
#menu li{
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul{
display:none;
list-style-type:none;
padding-bottom:0px;
}
#menu:hover ul, #menu:hover ul li:hover ul{
display:block;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>
<a href="X">
Home
</a>
</center>
<ul>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Disclaimer
</a>
</li>
</ul>
</li>
<li>
<center>
<a href="#">
Practice Areas
</a>
</center>
<ul>
<li>
<a href="#">
Civil Law
</a>
</li>
<li>
<a href="#">
Criminal Law
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Family Law
</a>
<ul>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Updated : Demo
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>