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>
Related
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>
I am having trouble with my CSS navigation bar. I am unable to remove the end line in the navigation bar. It looks out of place and unprofessional.
When i minus the width, it just moves the end tab below the navigation bar.
Any help or ideas on how to fix this?
Code:
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
border: none;
line-height: 1;
margin: 0;
padding: 0;
}
#cssmenu {
height: 37px;
display: block;
border: 1px solid;
border-radius: 5px;
width: auto;
border-color: #336699;
margin: 0;
padding: 0;
}
#cssmenu > ul {
list-style: inside none;
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
list-style: inside none;
float: left;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
margin-left: -3px;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
}
#cssmenu > ul > li > a {
outline: none;
display: block;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(55, 110, 166, 0.6);
font-weight: 700;
font-size: 13px;
font-family: verdana;
border-right: 1px solid #336699;
color: #ffffff;
padding: 12px 20px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li > a:after {
content: "";
position: absolute;
border-right: 1px solid;
top: -1px;
bottom: -1px;
right: -2px;
z-index: 99;
border-color: #3c3c3c;
}
#cssmenu ul li.has-sub:hover > a:after {
top: 0;
bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
content: "";
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}
#cssmenu > ul > li.has-sub:hover > a {
/*padding-bottom: 14px;*/
z-index: 999;
border-color: #2B5681;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu > ul > li.has-sub > a:hover,
#cssmenu > ul > li.has-sub:hover > a {
background: #2B5681;
border-color: #2B5681;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
background: #2B5681;
border-radius: 0 0 5px 5px;
z-index: 999;
padding: 10px 0;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul ul ul {
position: absolute;
}
#cssmenu ul ul li:hover > ul {
left: 100%;
top: -10px;
border-radius: 5px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
font: 10pt verdana;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(55, 110, 166, 0.6);
margin: 0;
padding: 8px 20px;
}
#cssmenu,
#cssmenu ul ul > li:hover > a,
#cssmenu ul ul li a:hover {
background: #2B5681;
background: -moz-linear-gradient(top, #2B5681 0%, #336699 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2B5681), color-stop(100%, #336699));
background: -webkit-linear-gradient(top, #2B5681 0%, #336699 100%);
background: -o-linear-gradient(top, #2B5681 0%, #336699 100%);
background: -ms-linear-gradient(top, #2B5681 0%, #336699 100%);
background: linear-gradient(top, #2B5681 0%, #336699 100%);
}
#cssmenu > ul > li > a:hover {
background: #336699;
color: Orange;
}
#cssmenu ul ul a:hover {
color: orange;
font-weight: bold;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid Orange;
}
<div id='cssmenu'>
<ul style="display: table;">
<li style="width: 108px;" class='active'><a runat="server" href='~/Applications/Sentinel/Default.aspx'><span>Home</span></a>
</li>
<li style="width: 118px;" class='has-sub'><a><span>Jobs</span></a>
<ul>
<li class='has-sub'><a runat="server" style="text-align: left;" href='~/Applications/Sentinel/Jobs.aspx'>Jobs List<span></span></a>
</li>
<li class='has-sub'><a runat="server" style="text-align: left;" href='~/Applications/Sentinel/AddJob.aspx'><span>Add New Job</span></a>
</li>
</ul>
</li>
</ul>
</div>
Add this line to your css
#cssmenu > ul > li:last-child > a, #cssmenu > ul > li:last-child > a:after {
border-right: none;
}
This code just remove borders from your last menu item.
Add this in your css to remove last border:
#cssmenu > ul > li:last-child a:after, #cssmenu > ul > li:last-child > a {
border-right: 0px solid;
}
I found this really awesome navigationbar template on the internet, but now I'm having troubles with positioning my navigation bar. I want the bar in the middle at the top of my screen. Everything I've tried thus far hasn't worked.
This is my code:
HTML:
<body>
<div id="cssmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</body>
css:
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #000000;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right > ul > li > a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu > ul > li > a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
transition: all .2s ease;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
background: #d7d7d7;
}
There's an option for that built into your CSS
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
Just add the align-center class to your wrapping div.
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #000000;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right > ul > li > a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu > ul > li > a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
transition: all .2s ease;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
background: #d7d7d7;
}
<div id="cssmenu" class="align-center">
<ul>
<li>Home
</li>
<li>About Me
</li>
<li>Portfolio
</li>
<li>Contact
</li>
<li>Login
</li>
</ul>
</div>
If you check carefully you'll see there's a right alignment option too. The default is aligned left.
I suspect that this was in the documentation where you found the code.
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 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