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 I used:
#menu-bar {position: fixed; top: 0px; left: 0px; 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;
}
This above menu bar only covers 80% of my desktop screen. How can I make it full width? I tried some options as mentioned in other Stack Overflow answers, but nothing helped completely. Please help me make menu bar full width on screen.
It doesn't look like you're actually setting the nav element to be 100% of the width in the CSS. Try adding this:
#menu-bar { width: 95%;}
#menu-bar > ul {width: 100% }
That worked in jsFiddle but you may need to adjust the percentage for menu-bar (the first line).
Try this code:
#menu-bar{width:100%}
#menu-bar ul{width:100%}
Just add right: 0 to #menu-bar:
#menu-bar {
position: fixed;
top: 0;
left: 0;
right: 0; /* <-- here */
z-index: 999;
height: 0; /* why is the height "0"? */
}
Related
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;
}
I have view a post from the stakoverflow site but it does not exactly address my issue. The problem I have is that my navigation menu width is set to 100% and I'm not sure how to control the sub or nested UL menu. Here's the jsFiddle link. The sub menu under "CHARACTER" is the problematic menu I'm working now. If I resize the browser window then the sub-menu's position changes.
<nav>
<ul>
<li>HOME</li>
<li>CHARACTER
<ul>
<li>Bill</li>
<li>Till</li>
<li>Cill</li>
<li>Will</li>
</ul>
</li>
<li>HISTORY</li>
<li>STORY</li>
</ul>
</nav>
Any help is much appreciated.
Try to add "float: left; width: 100%;" into your ul in css. So the HTML is:
<nav>
<ul>
<li>HOME</li>
<li>CHARACTER
<ul class="sub-menu">
<li>Bill</li>
<li>Till</li>
<li>Cill</li>
And here is the css:
/*THIS IS THE NAVATION MENU */
nav {
list-style:none;
text-align:center;
width: 100%;/*margin:20px;*/
padding: 0;
margin: 0 auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
z-index: 999;
}
nav ul {
float: left;
width:100%;
background: #efefef;
background: linear-gradient(top, #1295D8 0%, #005581 100%);
background: -moz-linear-gradient(top, #1295D8 0%, #005581 100%);
background: -webkit-linear-gradient(top, #1295D8 0%, #005581 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;
width:100%;
margin:0 auto;
}
nav ul li {
/*float: left;*/
display: inline;
padding: 13px 20px;
position: relative;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: inline-block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
nav ul .sub-menu {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
left: 0%;
float: left;
}
nav ul ul li {
padding: 13px 0;
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
/*padding: 13px 20px;*/
color: #fff;
}
nav ul ul li a:hover {
/*background: #4b545f;*/
background: #4b545f;
background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
/*padding: 13px 20px;*/
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
If I understood what you meant correctly then this should be the fix you need.
By adding 2 css rules things should be fixed probably.
nav ul li {
position: relative;
white-space: nowrap;
}
Then it will result in the sub-menu looking like this. http://snag.gy/MFEvw.jpg.
Here's the Fiddle
--
Explaining this really quick from my experience with menus(most of the time they are a pain)
The problem here is that the position: relative; is not set on the <li> inside the <ul>, But it's set on the <ul> itself, That's why the submenu keeps moving to the sides on resize, By setting position: relative; on the <li> inside the <ul> you make the submenu positioned relatively to the <li> instead of the <ul>.
You can read more about the white-space rule over at CSS Tricks, Great article.
I hope This will help you achieve what you need, Good Luck.
I've been having a hard time on my website with my div tags... every time I hover over the arcade tab or other drop-down menu, it drops behind my div for my movies! I want this to be the opposite where the tabs overlay the divs. Any suggestions?
This is the CSS I've been using:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -moz-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -webkit-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
padding: 0px 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
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: 10px 40px;
color: #757575; text-decoration: none;
font-family:arial;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0px;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
font-family:arial; font-weight:900;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is my HTML on the page for what it's overlapping:
<div id="text"><h1>Featured!</h1></div>
<div id="boxed">
<div id="movie">Ghost Shark</br><img src="/movies/posters/Ghost Shark.jpg"></div>
</div>
And this is the HTML for my nav pane:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>News</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The website it is on is http://gameshank.com/movies/horror/
Thanks is advanced!
Set a higher z-index to your nav
nav {
z-index: 1000;
}
I just finished writing my code for my navigation tabs using HTML5 and CSS3, but I'm having an issue! The tabs work perfectly in notepad, but when I put it in my website, it just doesn't work.
This is my CSS code:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -moz-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -webkit-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
padding: 0px 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
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: 10px 40px;
color: #757575; text-decoration: none;
font-family:arial;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0px;
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: 10px 40px;
color: #fff;
font-family:arial; font-weight:900;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
The following is the HTML code I use to place them in the website:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>Point N Click</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>News</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
If I delete the Home tab, the Arcade tab takes its place and looks the same way. Any ideas?
My website that this is happening on is: http://gameshank.com/8-20-13/
Thanks ahead!
On your site an additional link is inside your first li.
<a id="top"></a>
Also the center tag is deprecated. You should use:
margin: 0 auto;
For block level elements.
I would like my dropdown menu to have a tooltip tail under each dropdown. The CSS dropdown tutorial was easy, but I can't figure out how to add the arrow. See jsfiddle
HTML
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
CSS
<style>
nav {
margin: 100px auto;
text-align: center;
}
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;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
That's usually accomplished by using something like the pseudo-selector :before, doing something like:
nav ul ul:before {
position: absolute;
top: -9px;
left:20px;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #EEE;
border-left: 9px solid transparent;
content: '';
}
However keep in mind your hover and submenu color is the same, so you may want to style it a bit to suit your tastes...
Demo: http://jsfiddle.net/darkajax/vXdqu/
You can use the CSS pseudo-selector :before and borders:
http://jsfiddle.net/xFUun/2/