I can not open the submenu, I want to open the submenu when I hover over "Services" submenu, I think I have some mistakes in CSS.
I try to fix the menu using only CSS.
I have tried this code and this one, Unfortunately, the problem has not been resolved.
This is the CSS and HTML code:
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 200px;
}
#cssmenu ul a,
#cssmenu ul a:link,
#cssmenu ul a:visited {
display: block;
color: #848889;
text-decoration: none;
font-weight: 300;
}
#cssmenu > ul {
float: none;
}
#cssmenu ul {
background: #fff;
}
#cssmenu > ul > li {
border-left: 3px solid #d7d8da;
}
#cssmenu > ul > li > a {
padding: 10px 20px;
}
#cssmenu > ul > li:hover {
border-left: 3px solid #3dbd99;
}
#cssmenu ul li:hover > a {
color: #3dbd99;
}
#cssmenu > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#cssmenu ul ul a:link,
#cssmenu ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#cssmenu ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#cssmenu ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#cssmenu ul ul li {
padding: 0 20px;
background: #fff;
}
#cssmenu ul ul li:last-child {
border-bottom: 3px solid #d7d8da;
padding-bottom: 10px;
}
#cssmenu ul ul li:first-child {
padding-top: 10px;
}
#cssmenu ul ul li:last-child > a {
border-bottom: none;
}
#cssmenu ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="active"><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li>S1
<ul>
<li>S1.1</li>
<li>S1.2</li>
</ul>
</li>
<li>S2</li>
</ul>
</li>
<li><i class="fa fa-fw fa-location-arrow"></i> Adress</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>
can you help me please
Thanks in advance
I recommend not to use visibility: hidden, but instead display:none for the submenu ( changed that in the #cssmenu ul ul rule in my snippet below).
Apart from that, you need a CSS rule that on hover of the parent li switches the direct child ul to display: block, with this rule:
#cssmenu ul li:hover > ul {
display: block;
}
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
margin-top: 1px;
display: none;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#cssmenu ul li:hover > ul {
display: block;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 200px;
}
#cssmenu ul a,
#cssmenu ul a:link,
#cssmenu ul a:visited {
display: block;
color: #848889;
text-decoration: none;
font-weight: 300;
}
#cssmenu > ul {
float: none;
}
#cssmenu ul {
background: #fff;
}
#cssmenu > ul > li {
border-left: 3px solid #d7d8da;
}
#cssmenu > ul > li > a {
padding: 10px 20px;
}
#cssmenu > ul > li:hover {
border-left: 3px solid #3dbd99;
}
#cssmenu ul li:hover > a {
color: #3dbd99;
}
#cssmenu > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#cssmenu ul ul a:link,
#cssmenu ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#cssmenu ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#cssmenu ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#cssmenu ul ul li {
padding: 0 20px;
background: #fff;
}
#cssmenu ul ul li:last-child {
border-bottom: 3px solid #d7d8da;
padding-bottom: 10px;
}
#cssmenu ul ul li:first-child {
padding-top: 10px;
}
#cssmenu ul ul li:last-child > a {
border-bottom: none;
}
#cssmenu ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="active"><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li>S1
<ul>
<li>S1.1</li>
<li>S1.2</li>
</ul>
</li>
<li>S2</li>
</ul>
</li>
<li><i class="fa fa-fw fa-location-arrow"></i> Adress</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>
Related
The hidden li (e.g. Space 01, Space 02) expands in height, when user visits the website for the first time.
Once user refreshes the browser, the height of li will look just fine.
How do I fix this issue? This problem only exists in IE browsers.
#cssmenu {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 13px;
line-height: 26px;
text-align: left;
}
#cssmenu > ul {
width: auto;
list-style-type: none;
padding: 0;
margin: 0;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
border-right: 1px solid #F1F1F1;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
display: none;
width: 250px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block;
border-bottom: 1px solid #f1f1f1;
}
#cssmenu > ul li.has-sub > a {
background-image: url('caret.png');
background-repeat: no-repeat;
background-position: 90% -330%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
background: #009FDA url('caret.png') no-repeat;
background-position: 90% 430%;
}
#cssmenu > ul li a {
display: block;
padding: 12px 24px 11px 17px;
text-decoration: none;
color: #747474;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: #009FDA;
color: #fff;
}
#media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('images/menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-color: #009FDA;
background-position: 95% -35%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub ul {
display: block;
position: static;
width: 100%;
background: #ffffff;
border: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block !important;
}
#cssmenu > ul li.has-sub ul li a span {
display: block;
}
#cssmenu > ul li.has-sub > a {
background-image: none;
}
}
/* Make sure they show even if hidden in mobile view by JS */
#media (min-width: 600px) {
#cssmenu > ul > li.collapsed {
display: inline-block !important;
*display: inline;
zoom: 1;
}
#cssmenu > ul ul li.collapsed {
display: block !important;
}
}
<html>
<div id="cssmenu">
<ul>
<li class="has-sub">
<a href="#">
<span class="navi"><img src="http://www.kclibrary.org/sites/all/themes/kcplibraryzen/images/menu_items/menu-icon.png"></span>
<span>Test Dropdown</span></a>
<ul>
<li>
<span>Space 01</span></li>
<li class="last">
<span>Space 02</span></li>
</ul>
</li>
</ul></div>
</html>
I developed a navigation menu which is responsive. How can I make the menu that when it is on a screen resolution max 480px not stacked under each other but gets hidden and shown like the below:
HTML Code:
<div id='cssmenu'>
<div class="logo">
<img src="http://img1.wikia.nocookie.net/__cb20100606210319/grooveshark/images/c/c2/Logo_Horizontal.jpg" alt="logo" />
</div>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub '><a href='#'>Products</a>
<ul>
<li class='has-sub '><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
CSS:
/*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.logo{
margin-top:0px;
float:left;
margin-left:20%;
padding-right:10px;
}
.logo img{
width:200px;
height:66px;
}
#Media screen and (max-width:480px) {
#cssmenu ul li { display: block ; width: 100% ; text-align:center; }
#cssmenu > ul > li > a { line-height: 60px; }
.content1{font-size:100%;}
}
}
#Media screen and (max-width:768px) {
.logo{ margin-left:10%;}
}
Here you can also find a fiddle of this: http://jsfiddle.net/uA4fL/
I basically made changes in the average query 480px,
see this jsfiddle: http://jsfiddle.net/uA4fL/6/
if not what you expect. regards
#Media screen and (max-width:480px) {
#cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;}
.logo{margin:0;padding:0}
#cssmenu .logo > a{margin:0;padding:0}
#cssmenu ul li { display: block ; width: 100% ; text-align:center; }
#cssmenu > ul > li > a { line-height: 60px; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
width: 100%;
/* float: left; */
}
#cssmenu ul ul ul {display:none;}
#cssmenu .has-sub:hover > ul {
border-top: 0 none;
visibility:visible;
display: block;
float: left;
clear: both;
position:relative;
right: 0;
}
#cssmenu ul li.hover, #cssmenu ul li:hover{
display:inline-block;
}
.content1{font-size:100%;}
}
I have a funny issue, I developed a Wordpress navigation in my theme, on my homepage the menu renders out good but for some reason when I click on about for example the menu styling is lost on IE only and no other browser.
Here is a testing link of the site where one can have a look:
http://rcb.com.mt/wordpresstesting/melita/safepay/
This is the menu calling part in the header.php file:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu','sort_column' => 'menu_order','container_id' => 'cssmenu' ) ); ?>
This is the CSS I am applying on the menu above:
/*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
position: relative;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu li.current-menu-item > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
Can someone guide through fixing this please! Many thanks!
I can't see any DOCTYPE declared in the page.
Also try to clear the floating elements of your nav possibly at the end of the parents div.
If you are using HTML5 you need to add libraries which support it on IE8 in the head of your html file like this:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
I am trying to develop a menu which is responsive. The menu should look like this when not responsive:
And like the below when screen is reduced for tablets/mobiles:
You can find a fiddle here: http://jsfiddle.net/yxMhj/
HTML Code:
<div id='cssmenu'>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub '><a href='#'>Products</a>
<ul>
<li class='has-sub '><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
CSS Code:
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.logo{
margin-top:0px;
float:left;
margin-left:20%;
padding-right:10px;
}
I really appreciate your help guys!
Try this
<style>
.menu {
border: 0;
margin: 0 0 10px 0;
padding: 0;
width: 100%;
}
.menu ul {
display: table;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.menu li {
display: table-cell;
background-color: #eee;
}
.menu li:hover {
background-color: #ccc;
}
.menu a {
display: block;
padding: 10px 0;
width: 100%;
}
.menu li, .menu a {
text-align: center;
}
#Media screen and (max-width:480px) {
div.menu li {
display: block !important;
width: 100% !important;
}
}
</style>
<div class="menu">
<ul>
<li>Your logo here</li>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Blog</li>
</ul>
</div>
I have the following HTML code which displays a horizontal expandable menu inside a DIV:
<div id='cssmenu'>
<ul>
<li class='active'><a href='about_us.aspx'>ABOUT US</a></li>
<li>MISSION</li>
<li class='has-sub'><a href='#'>LEADERSHIP</a>
<ul>
<li><a href='#'>President</a></li>
<li><a href='#'>Medical Director</a></li>
<li><a href='#'>Board of Directors</a></li>
<li><a href='#'>Key Administrators</a></li>
</ul>
</li>
<li><a href='#'>WESTMED HISTORY</a></li>
<li><a href='#'>COMMUNITY SUPPORT</a></li>
</ul>
</div>
Here is my CSS for the menu:
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
#cssmenu ul, #cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 19;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
border-right: 1px solid #535353;
}
#cssmenu ul li:last-child {
border-right: none;
}
#cssmenu ul li.hover, #cssmenu ul li:hover {
position: relative;
z-index: 20;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 21;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 12px;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li > a {
line-height: 48px;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #35a6ff;
}
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
For desktop and large screen it works great but whenever I load it inside a tablet the image goes over to the next line:
How can I make the menu more fluid, so it resizes based on the amount of space that's available to the cssmenu DIV?
Check out flexbox, this might be an option for you.
This demo is pretty handy, you would choose space-around (if I understood your question correctly): http://codepen.io/chriscoyier/pen/FAbpm