How could I make these styles responsive to all mobile devices?
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #0066cc;
background: linear-gradient(top, #0066cc 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #0066cc 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #0066cc 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 0.001px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #0066cc;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 15px;
color: #000000; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 15px;
color: #fff;
}
nav ul ul li a:hover {
background: #0066cc;
}
Thanks for everything.
You Need Bootstrap for making it responsive.You can learn it here: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-layout.php
Related
I have a navigation tab which is only taking up half of the width which I require, I need it to take up 100% width however it does not. I have looked at around this site and google could not get it working like I want it. IThe navigation ie the black background should take up 100% of the width however it does not. any ideas.
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #1e1d1d;
background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #f7f7f7;
background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #f7f7f7 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #ff0000;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #f7f7f7; text-decoration: none;
}
nav ul ul {
background: #f7f7f7; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #888484;
color: #ff0000;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
<nav>
<ul>
<li>Basin & Sinks</li>
<li>Showers
<ul>
<li>Shower Trays</li>
<li>Shower Glass
<ul>
<li>Frosted</li>
<li>Clear</li>
</ul>
</li>
</ul>
</li>
<li>Bathroom Accessories
<ul>
<li>Plugs</li>
<li>Toilet Paper</li>
</ul>
</li>
<li>Toilets</li>
</ul>
</nav>
https://jsfiddle.net/1nzot5rq/1/
have tried several links and have tried width: 100%, max-width: 100%; however I have had no luck.
Just add width: 100%; box-sizing: border-box; to nav ul like this: https://jsfiddle.net/d8ch5qer/
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #1e1d1d;
background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
box-sizing: border-box;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #f7f7f7;
background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
}
nav ul li:hover a {
color: #ff0000;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #f7f7f7;
text-decoration: none;
}
nav ul ul {
background: #f7f7f7;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #888484;
color: #ff0000;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
<nav>
<ul>
<li>Basin & Sinks</li>
<li>Showers
<ul>
<li>Shower Trays</li>
<li>Shower Glass
<ul>
<li>Frosted</li>
<li>Clear</li>
</ul>
</li>
</ul>
</li>
<li>Bathroom Accessories
<ul>
<li>Plugs</li>
<li>Toilet Paper</li>
</ul>
</li>
<li>Toilets</li>
</ul>
</nav>
Add:
nav ul {
width: 100%;
display:block;
}
But even with that you will have problem managing you columns to fit all width. You can use JS to calculate each width or use display: table for nav ul and display: table-cell for you ul li's
If you're looking on Chrome, Chrome adds 40px of padding as follows to <ul>'s:
-webkit-padding-start: 40px;
This is making the <ul> extend over the width you define.
There's 2 ways of overcoming this:
1. Remove all padding, including browser defaults
https://jsfiddle.net/pzod450b/1/
Simply add -webkit-padding-start: 0. On top of that, you've also added 20px of padding either side of the <ul>, remove this
CSS:
nav ul {
background: #1e1d1d;
background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
}
2. Use box-sizing: border-box
Using this method will ensure that the browser calculates all padding/border applied to an element within it's final width:
https://jsfiddle.net/u1vzag3b/
nav ul {
background: #1e1d1d;
background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
box-sizing: border-box;
}
You'll notice in both cases, you should add width: 100% to nav ul.
I have a blog here, which has a navbar with dropdown functionality.
However I am not getting the dropdown list under the item "Selenium" in Chrome, but the dropdown is working fine in other browsers
Unfortunately I do not understand where the problem is.
I have a nav bar with following html:
<nav id="menu-bar">
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/' >Home</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SeleniumTesting'>Selenium</a>
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/2015/04/selenium-testng.html'>TestNG</a></li>
<li><a href='http://sunilpatro1985.blogspot.com/2015/03/selenium-result-report-testng-ant.html'>ANT Reporting</a></li>
</ul>
</li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SoftwareTesting'>TestingConcepts</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/BasicJava' >JavaBasics</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/WindowsOS' >Windows</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/p/demo.html' >Demo</a></li>
</ul></nav>
and the CSS styling for the above is:
#menu-bar {position: fixed; top: 0px; left: 330px; z-index: 999;height:0px;}
#menu-bar,#menu-bar a {
text-align: center;
margin: 0px 0px;
border:none;
}
#menu-bar ul ul {
display: none;
}
#menu-bar ul li:hover > ul {
display: block;
}
#menu-bar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
}
#menu-bar ul:after {
content: ""; clear: both; display: block;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#menu-bar ul li:hover a {
color: #fff;
}
#menu-bar ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
#menu-bar ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menu-bar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu-bar ul ul li a {
padding: 15px 30px;
color: #fff;
}
#menu-bar ul ul li a:hover {
background: #4b545f;
}
#menu-bar ul ul ul {
position: absolute; left: 100%; top:0;
}
In menu-bar you have a ul. Add style="overflow: visible;" to the ul and that will fix it.
You have to add overflow:visible; to your menu-bar->ul element
#menu-bar ul {
overflow:visible;
}
Fixed css
#menu-bar {position: fixed; top: 0px; left: 330px; z-index: 999;height:0px;}
#menu-bar,#menu-bar a {
text-align: center;
margin: 0px 0px;
border:none;
}
#menu-bar ul ul {
display: none;
}
#menu-bar ul li:hover > ul {
display: block;
}
#menu-bar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#menu-bar ul:after {
content: ""; clear: both; display: block;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#menu-bar ul li:hover a {
color: #fff;
}
#menu-bar ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
#menu-bar ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menu-bar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu-bar ul ul li a {
padding: 15px 30px;
color: #fff;
}
#menu-bar ul ul li a:hover {
background: #4b545f;
}
#menu-bar ul ul ul {
position: absolute; left: 100%; top:0;
}
For some reason each bit of text in the navigation bars are aligning to the right. Is there any way to change this so it goes into the center of each part of the navigation menu? If somebody knows how to do this can you please help out because I am completely stumped.
HTML:
<div id="links">
<nav>
ul>
<li>Students
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
<li>Teachers
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Events
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Nametag
<li>SignUp</li>
<li>Gallery
</ul>
CSS:
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links a{
margin:25px;
width:10px;
height: 0px;
font-size: 20px;
margin-top: 3px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;
color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
width: 140px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 0px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #A3A3A3;
}
Your anchors are fixed width, but not wide enough to hold the text. Consequently, it overflows out to the right.
add this css
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links > a{
padding:10px;
font-size: 20px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav > ul > li {
float: left;
text-align: center;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav > ul > li > a{
display: block;
padding: 10px 15px;
color: #FFFFFF; text-decoration: none;
font-size:20px;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 20px;
color: #fff;
display:block;
text-decoration:none;
}
nav ul ul li a:hover {
background: #A3A3A3;
}
EXAMPLE
I am referring to a CSS code from here. I have created a sample html and CSS file as shown there and It's working fine. However, I want to use this code in other place where ul,li have been already defined styles using another CSS file. So, i searched a bit and read that in this case, the solution is to use specific ids for elements so they will be distinguished. Can anyone please tell how to add ids to following CSS as I am confused because of their parent-child nesting in CSS code..
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
Follow this semantic structure...
Your HTML:
<nav id="mainmenu"> ... </nav>
<nav id="sidemenu"> ... </nav>
Your CSS:
nav#mainmenu ul {
...
}
nav#sidemenu ul {
...
}
This should allow distinction from there.
In the html, you would find the specific ul and li elements and add id="unique_name" (ie: ). Then, in the CSS, you would add #unique_id to style that element. For example:
HTML
<ul id="myUL">
CSS
#myUL {
background: red;
}
If you are wanting to apply your CSS to a specific nav object, you could just replace nav in the css with a your id like this
.newId ul ul {
display: none;
}
.newId ul li:hover > ul {
display: block;
}
.newId ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
.newId ul:after {
content: ""; clear: both; display: block;
}
.newId ul li {
float: left;
}
.newId ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.newId ul li:hover a {
color: #fff;
}
.newId ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
.newId ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.newId ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.newId ul ul li a {
padding: 15px 40px;
color: #fff;
}
.newId ul ul li a:hover {
background: #4b545f;
}
This will apply the given CSS to a nav object with the id "newId".
In css you access a member via its id using #
so if you were to set the ul li inside a nav that has the id myNav you would write
nav#myNav ul li {...}
keep in mind that id of course has to exist in your html (and may by standard only exist once per id)
<nav id="myNav"><ul><li>.....</li></ul></nav>
to add ids to css rules, just add # and id identifier (without spaces!) after the element, like:
nav ul#fisrtUlId ul#secondUlId {
display: none;
}
You can get the same result without using ids just including the css you provided after the existing one you mentioned. As long as the rules in the first css are not more descriptive, the rules for the same elements defined in the second css file will take precedence, which is I believe you want to accomplish here.
I want to create a horizontal menu dropdown, like this:
Home Menu 1 Menu 2 Menu 3 Menu 4
Sub Menu 11
Sub Menu 12
Sub Menu 13ssssssssssssssssssssssssssssssssssssss
Sub Menu 14
And each sub menu will display in one row, even if sub menu too long
Here's my code
Is thath what you're looking for?
http://jsfiddle.net/VUScp/44/
I just added some CSS, the HTML is intact...
/* CSS code */
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu > ul > li > a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: 154px;
}
#menu ul ul {
padding:0;
position: absolute;
top:100%;
left:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a{
background: #f0f0f0;
color: #333;
border:none;
width:100%;
}
#menu ul ul li a{
display:inline-block;
white-space:nowrap;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}
This may be your answer-http://jsfiddle.net/VUScp/22/
Use height and width auto.
Code i edited in your fiddle-
/* CSS code */
#menu {
background: #333;
height: auto;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: auto;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block!important;
}
EDIT
GOT IT http://jsfiddle.net/VUScp/61/
#menu {
background: #333;
height:30px;
}
#menu ul {
margin:0;
padding:0;
}
#menu ul a {
text-decoration: none;
margin-right:150px; /* Use to adjust top menu width */
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px 12px;
}
#menu ul ul {
padding:0;
position:absolute;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
margin-right:0; /* Undo top menu width for sub menu */
min-width:160px; /* use to adjust sub menu minimum width */
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover, #menu ul li:hover ul li {
display:block !important;
}
A bit closer but not perfect:
http://jsfiddle.net/VUScp/14/
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
padding-right: 154px;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}
use this code
html code
<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 class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
css code
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}