I'm trying to learn navigation bars and dropdowns with HTML & CSS only, and I have encountered an issue, that I can't fill the buttons to the length of a container. I tried to use flexbox but that didn't somehow work.
Here's the code:
body {
background-color: #D4D4D4;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 26px;
color: #666;
margin: 0;
}
.reset {
clear: both;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(58, 58, 58);
border-top: 3px solid #FFF;
box-shadow: 0px 11px 21px 0px rgba(0,0,0,0.59);
}
.navigation li {
float: left;
}
.navigation li:hover {
background-color: #222;
}
.navigation li:first-child {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #FFF;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
overflow: hidden;
}
.navigation ul li {
float: none;
}
.navigation li:hover > ul li:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background-color: #000;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
}
.navigation li:hover {
border-bottom: 2px solid dodgerblue;
}
.navigation li {
border-bottom: 2px solid transparent;
}
#media screen and (min-width: 1281px) {
.submenu::after {
content: " +";
}
.navigation li:hover .submenu::after {
content: " –";
}
.navigation li:hover > ul {
display: block;
background-color: #222;
border: 3px solid #FFF;
border-top: 0;
border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/navbar.css">
<title>My Website</title>
</head>
<body>
<div id="container">
<!-- HEADER -->
<header>
<ul class="navigation">
<li>HOME</li>
<li><a class="submenu" href="#">DROPDOWN 1</a>
<ul>
<li>PLACEHOLDER 1</li>
<li>PLACEHOLDER 2</li>
<li>PLACEHOLDER 3</li>
</ul>
</li>
<li><a class="submenu" href="#">DROPDOWN 2</a>
<ul>
<li>PLACEHOLDER 1</li>
<li>PLACEHOLDER 2</li>
<li>PLACEHOLDER 3</li>
</ul>
</li>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<div class="reset"></div>
</ul>
</header>
</div>
</body>
</html>
Try this code:
body {
background-color: #D4D4D4;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 26px;
color: #666;
margin: 0;
}
.reset {
clear: both;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(58, 58, 58);
border-top: 3px solid #FFF;
box-shadow: 0px 11px 21px 0px rgba(0,0,0,0.59);
display: flex;
}
.navigation li {
flex: 1 0 auto;
}
.navigation li:hover {
background-color: #222;
}
.navigation li:first-child {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
}
.navigation li a {
display: block;
padding: 0 5px;
text-decoration: none;
line-height: 40px;
color: #FFF;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
overflow: hidden;
}
.navigation ul li {
float: none;
}
.navigation li:hover > ul li:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background-color: #000;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
}
.navigation li:hover {
border-bottom: 2px solid dodgerblue;
}
.navigation li {
border-bottom: 2px solid transparent;
}
#media screen and (min-width: 1281px) {
.submenu::after {
content: " +";
}
.navigation li:hover .submenu::after {
content: " –";
}
.navigation li:hover > ul {
display: block;
background-color: #222;
border: 3px solid #FFF;
border-top: 0;
border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
}
}
<div id="container">
<!-- HEADER -->
<header>
<ul class="navigation">
<li>HOME</li>
<li><a class="submenu" href="#">DROPDOWN 1</a>
<ul>
<li>PLACEHOLDER 1</li>
<li>PLACEHOLDER 2</li>
<li>PLACEHOLDER 3</li>
</ul>
</li>
<li><a class="submenu" href="#">DROPDOWN 2</a>
<ul>
<li>PLACEHOLDER 1</li>
<li>PLACEHOLDER 2</li>
<li>PLACEHOLDER 3</li>
</ul>
</li>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<div class="reset"></div>
</ul>
</header>
</div>
Related
I have a menu that includes a sub menu which to most parts works well. However, when you click an item in the menu, the sub menu opens but is not lining up next to the item selected. It just stays as the top next to the main menu.
It is rather difficult to explain, so I posted code on as a snippet and would would apprecite it if someone could point out my error. Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
}
.navigation li:hover > ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover > ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
Add position: relative to .navigation ul li.
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
position: relative;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
I am trying to create a sub menu in a html navigation menu. The menu is appearing but it is showing in the menu list instead of to the right. I have made a screenshot of the problem and would be grateful if someone could help me adapt my code.
You will see from the screenshot, that the sub menu is appearing in the main menu and not off to the right of the selected link.
I have tried so many options that I need to turn to the experts for help.
Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
overflow: hidden;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
Image screenshot
Normal dropdown
Sub menu showing problem
Use top:0 and left:100% to the 2nd level submenu
Stack Snippet
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
</ul>
<div class="clear"></div>
</div>
I've created a dropdown menu in css. My problem is that the dropdown is fixed on mobile phone if i touch somewhere outside the menu. How can i hide my dropdown menu on mobile phone? On desktop with mouse it works fine.
here is my css:
#nav {
margin: 0;
text-align:center;
position:fixed;
width:1162px;
top: 0%;
left: 50%;
margin-left: -587px; /* Die Hälfte der Breite (width) + 6px */
padding: 7px 6px 0;
background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(img/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 185px;
top: -1px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
and here the navigation menu set with ul and li
<ul id="nav">
<li class="current">Test</li>
<li>Musik
<ul>
<li>Test</li>
<li>Test
<ul>
<li>Test</li>
</ul>
</li>
</ul>
</li>
</ul>
ul { display:block; padding:0px;}
ul li{ display: inline-block; position:relative;}
ul li ul { display:none; position:absolute; top:100%; left:0;}
ul li ul li { display:block;}
ul li ul li ul { left:100%; top:0;}
ul li:hover > ul { display:block; width:120px;}
<ul>
<li>
Menu option
</li>
<li>
Menu option2
<ul>
<li>
Submenu 1
<ul>
<li>
Submenu 2
</li>
</ul>
</li>
<li>
Submenu
</li>
<li>
Submenu
</li>
</ul>
</li>
</ul>
If you are using hover property to show drop-down menu on desktop then it's automatically hidden on mobile when you touch outside the menu
Drop down menu hover is working but not able to click.
Tried a lot of times, just couldn't sort out the problem..
My html code: (looks like it does not have have any error)
HTML:
<ul id="menu-bar">
<li class='active'><span>Home</span></li>
<li><span>About Us</span></li>
<li class='has-sub'><a href='#'><span>1</span></a>
<ul>
<li class='has-sub'><a href='#'><span>1-1</span></a>
<ul>
<li><a href='#'><span>1-1-1</span></a></li>
<li class='last'><a href='#'><span>1-1-2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>1-2</span></a>
<ul>
<li><span>1-2-1</span></li>
<li><span>1-2-2</span></li>
<li><span>1-2-3</span></li>
<li><span>1-2-4</span></li>
<li><span>1-2-5</span></li>
<li class='last'><a href='#'><span>1-2-6</span></a></li>
</ul>
</li>
<li class="has-sub"><span>1-3</span>
<ul>
<li><span>1-3-1</span></li>
<li><span>1-3-2</span></li>
<li><span>1-3-3</span></li>
<li class='last'><span>1-3-4</span></li>
</ul>
</li>
<li class="has-sub"><span>1-4</span>
<ul>
<li><span>1-4-1</span></li>
<li class='last'><span>1-4-2</span></li>
</ul>
</li>
</ul>
</li>
<li><span>1-4</span></li>
<li><a href='#'><span>1-5</span></a></li>
<li class='last'><a href='#'><span>1-6</span></a></li>
</ul>
CSS:
#menu-bar {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 6px 6px 4px 6px;
height: 45px;
line-height: 100%;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 2px 2px #6E052E;
-webkit-box-shadow: 2px 2px 2px #6E052E;
-moz-box-shadow: 2px 2px 2px #6E052E;
background: #FF0A6C;
border: solid 1px #C40853;
position: relative;
z-index: 999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 0px 6px 0px 6px;
float: left;
position: relative;
list-style: none;
}
#menu-bar li ul {
display: none;
}
#menu-bar a {
font-weight: bold;
font-family: 'comic sans ms';
font-style: normal;
font-size: 25px;
color: #FFBFDD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-shadow: 2px 2px 2px #6E052E;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a,#menu-bar li:hover>a {
background: #FFD4EC;
color: #FF0088;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 2px #000000;
}
#menu-bar ul li:hover a,#menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #FF0088 !important;
color: #FFC9F1 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 1px #FFFFFF;
}
#menu-bar ul {
background: #FFD4EC;
display: none;
margin: 0;
padding: 0;
width: 190px;
position: absolute;
top: 45px;
left: 0;
border: solid 1px #FF8CB6;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px #6E052E;
-moz-box-shadow: 2px 2px 2px #6E052E;
box-shadow: 2px 2px 2px #6E052E;
}
#menu-bar li:hover>ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding: 10px 0px 10px 15px;
color: #FF0088 !important;
font-size: 12px;
font-style: normal;
font-family: arial;
font-weight: normal;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child>a {
border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
}
#menu-bar ul li:last-child>a {
border-bottom-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
You could add this for your sub sub menu.
#menu-bar li li:hover > ul {
left: 190px;
top: 0;
}
And place your submenu higher so you can acces it.
#menu-bar ul {
background: #ffd4ec;
display: none;
margin: 0;
padding: 0;
width: 190px;
position: absolute;
top: 28px;
left: 0;
border: solid 1px #ff8cb6;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px #6e052e;
-moz-box-shadow: 2px 2px 2px #6e052e;
box-shadow: 2px 2px 2px #6e052e;
}
See http://jsbin.com/fixaperunone/1/edit
I made a menubar like picture below , Contact item is in the left of Company item , when I resize the browser Contact goes down , what is the problem?
here is picture http://oi61.tinypic.com/64h01g.jpg
HTML
<div id="header"><h1><center>Online Shopping</center></h1></div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
css
body{
background:#EBEBEB;
}
#header{
padding:0;
margin:0;
height:100px;
background:#6355BD;
}
#cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(images/overlay.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #000;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #979797 url(images/overlay.png) repeat-x 0 -40px;
background: #666666 url(images/overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #7d7d7d url(images/overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
z-index: 1000;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: #ffffff url(images/overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}
I dont think there is a problem, perfectly normal behavior.
There is not enough space in the container, and the last element goes on second line.
If you dont want this to happen, put a min-width:400px; to #cssmenu ul. But since you have couple of ul's inside #cssmenu, better put separate class on the top one.