I made a navbar with a mobile media query, but when I try to hover over the hamburger menu, the navbar isn't static and I cant click any links.
Can anyone help me to fix this, I've already been trying for 90 mins :/
JSFiddle: https://jsfiddle.net/dxmbc5p6/
All code in Jsfiddle:
<body class="animated fadeIn">
<div class="nav animated fadeInDown">
<img src="hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>TITLE</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #FFF;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 150px;
}
.nav .logo h1 {
color: #222;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 150px;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #FFF;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
}
.nav ul a {
color: #222;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 50%;
width: 100%;
background: url('bg.jpg');
background-size: cover;
position: relative;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#media only screen and (max-width: 850px){
.nav .hamburger {
height: 6%;
display: block;
float: left;
margin: 2% 0 0 2%;
left: 0;
top: 0;
position: fixed;
}
.nav .logo {
text-align: center;
margin: 0;
float: none;
}
.nav > ul {
display: none;
float: none;
width: 100%;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul:hover {
display: block;
width: 100%;
}
.nav ul:hover li {
width: 100%;
padding: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.nav > ul > li > ul > li {
background-color: #D4D4D4;
}
}
Try adding this to the css.
ul > li a,
.nav > ul > li > ul > li a
{
display:block;
}
I will also point out that with a media tag detecting width as your way of detecting mobile. Your mobile site will display on desktops as well when the browser is shrunk below 850px. This will be a problem with your hover event as it will not fire after to mouse leaves the hamburger.
It doesn't work because of the fact that as soon as you leave the image it looses it's hover state. Look at this example from your code:
<li>
<li>PAGE</li>
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
And the CSS
.nav li:hover > ul {
display: block;
}
You put the css on the first li which contains the section as well as the sub section. This way it doesn't matter if you are over the anchor element or the unordered list, they are still part of the first li so it is hovered.
In the hamburger situation you put the hover css on a element which doesn't contain the menu so as soon as you leave the hamburger image it looses it's hover state.
Related
I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>
Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
How can I decrease the size of a <nav> tag in CSS? I cannot seem to figure it out. I have provided all of the code from my project below. My code did have PHP, but I have removed it due to it being unnecessary. Here is a JSFiddle, if you wish to preview the code there.
HTML and CSS:
#top-menu {
top: 0;
position: fixed;
}
nav {
position: relative;
/*float: left;*/
width: 100%;
background: #1E1E1E;
/* display: table; */
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
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 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
/*--------------------------------------------*/
#menu {
background-color: #1E1E1E;
text-align: center;
padding-bottom: 0px;
}
body {
margin: 0px;
}
.clearfloat {
clear: both;
margin: 0;
padding: 0;
}
/*--------------------------------------------*/
#bottom {
float: left;
width: 100%;
background: #1E1E1E;
/*display: table; */
margin: 0;
text-align: center;
min-height: 25px;
height: 25px;
border-width: 0px;
margin-top: 0px;
padding-top: 0px;
bottom: 0px;
position: fixed;
}
#bottom ul ul {
display: none;
}
#bottom ul li:hover > ul {
display: block;
}
#bottom ul {
background: #1E1E1E;
color: white;
padding: 0 0;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
}
#bottom ul:after {
content: "";
clear: both;
display: block;
}
#bottom ul li {
float: left;
}
#bottom ul li:hover:nth-child(1) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover {
background: #1E1E1E;
color: white;
text-decoration: underline;
}
#bottom ul li:hover a {
color: #fff;
}
#bottom ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
#bottom ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width: auto;
}
#bottom ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#bottom ul ul li a {
padding: 15px 40px;
color: #fff;
}
#bottom ul ul li a:hover {
background: #4b545f;
}
#bottom ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
/*--------------------------------------------*/
.bottommenuitem {
vertical-align: middle;
padding: 25px 40px;
color: #757575;
}
<!DOCTYPE html5>
<html>
<head>
<title>Firma A/S</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>
<body>
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
<!-- PHP was here -->
</nav>
</nav>
<div style="margin-top: 410; margin-bottom: 115">
<!-- More PHP was here -->
</div>
<nav id="bottom">
<ul>
<li class="bottommenuitem">Firma A/S</li>
<li class="bottommenuitem">phone No</li>
<li>xxx#xxx.xx
</li>
</ul>
</nav>
</body>
</html>
Any help is appreciated, thank you.
Please try this:
nav ul {
background: #1e1e1e none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: white;
display: inline-table;
list-style: outside none none;
margin: 0;
padding: 10px;
position: relative;
}
nav {
float: left;
width: 100%;
background: #1E1E1E;
display: table;
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
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 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
</nav>
</nav>
If you are talking about the fixed nav id=top-menu, just add a height to the CSS for the id selector. It works for me. If you have problems with it being overridden, make sure that it is placed lower in the CSS file or add !important
after the rule.
#top-menu {
height: 6px;
}
#top-menu {
height: 6px !important;
}
I have a horizontal menubar, and having an issue with the sub-menus. I want the sub-menus to have the same width with their headers(top li?).
Fiddle
I know one way to solve the problem, by giving fixed width to top li elements, but I don't want that. I want each category to have its own width. Is there an alternative way to fix this?
<div id="header">
<div class="container">
<div class="menu-container">
<ul id="menu">
<li>Home</li>
<li>aaaaaaaaaa
<ul>
<li>blabla</li>
<li>bla bla</li>
<li>blabla bla</li>
</ul>
</li>
<li>bbbbbbbbbb
<ul>
<li>blabla</li>
<li>bla bla blabla</li>
</ul>
</li>
<li>cccccccc
<ul>
<li>bla</li>
</ul>
</li>
<li>ddddd</li>
</ul>
</div>
</div>
</div>
<div id="content" class="wrapper"></div>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body {
background: rgb(36,36,36);
font: normal 100% Arial, Verdana, sans-serif;
}
#header {
background: rgb(16,16,16);
border-top: 3px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
z-index: 100;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
.menu-container {
display: table;
margin: 0 auto;
}
#header ul {
padding: 0;
margin: 0;
list-style: none;
background: rgb(16,16,16);
}
#header ul li {
height: auto;
text-align: center;
width: 130px;
}
#menu {
overflow: auto;
z-index: 100;
width: 665px;
margin: 0 auto;
}
#menu a {
display: block;
padding: 20px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
text-decoration: none;
color: WhiteSmoke;
border-right: 1px solid #1d1d1d;
}
#menu a:hover {
color: white;
background: rgb(50,50,50);
}
#menu > li {
float: left;
}
#menu > li.active {
background: rgb(50,50,50);
}
#menu li:nth-child(1) {
border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
display: none;
z-index: 100;
width: auto;
position: absolute;
}
#menu li ul a {
padding: 10px 0;
}
#menu li ul li {
border-left: 1px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
font-size: .8em;
}
#menu li ul li:nth-child(1) {
border-top: 1px solid rgb(32,32,32);
}
.wrapper {
width: 100%;
min-height: 500px;
overflow: auto;
background: rgb(36,36,36);
border-top: 1px solid rgb(55,55,55);
}
I applied these styles on top of your styles and they seem to have done what you want. (non-fixed width top menu where second layer scales to width of thing above it).
.menu-container { }
.menu-container #menu { width: auto; overflow: visible; height: 60px; }
.menu-container #menu li { position: relative; display: block; width: auto; }
.menu-container #menu li ul { display: none; width: 100%; }
.menu-container #menu li:hover ul { display: block; }
.menu-container #menu li ul li { display: block; width: 100%; }
Here's the fiddle with modified code: http://jsfiddle.net/3zj6E/1/.
The following CSS rule sets were changed:
#menu {
overflow: auto;
z-index: 100;
display: table;
margin: 0 auto;
}
#menu > li {
float: left;
position: relative;
}
#menu li ul {
display: none;
z-index: 100;
position: absolute;
width: 100%;
}
I've to put a navigation along to the full width of the browser.
The problem is when click on the first item, along to the full browser width of that item shoild be effected.
This is also for last item
To do that, I've just worked with nav first-child and nav last child. You can see my work at here.
This works well at firefox. But, at chrome, if I zoom in/out the brwoser, the nav items will break.
HTML code:
<body>
<div id="header" class="outer">
<div class="inner">
<h1 class="logo"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></h1>
<div class="nav">
<ul>
<li>home</li>
<li>Nieuws</li>
<li>Praktijk</li>
<li>Behandelingen
<ul>
<li>ouderen</li>
<li>Sport</li>
<li>Algemeen</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="inner">
<div id="content">
<p>Lorem...</p>
</div>
</div>
</body>
CSS code:
body {
background: #fff;
color: #000;
font-family: 'HelveticaNeueLTStd55Roman';
font-size: 14px;
line-height: 1em;
overflow-x: hidden;
}
.outer {
width: 100%;
float: left;
}
.inner {
width: 941px;
margin: 0 auto;
}
#header {
width: 100%;
float: left;
padding: 22px 0 5px 0;
background: url(../images/header-bg.png) repeat-x;
}
h1.logo a {
display: block;
float: left;
}
.nav {
width: auto;
float: left;
margin: 24px 0 0 0;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav ul li a {
min-width: 155px;
text-align: center;
margin: 0 0 8px -21px;
padding: 0 22px 0 32px;
display: block;
font-size: 14px;
color: #cc3840;
line-height: 28px;
font-family: 'HelveticaNeueLTStd75Bold';
text-transform: uppercase;
border-radius: 14px;
background: #fff;
}
.nav ul li.active a, .nav ul li a:hover {
color: #cf383c;
background: none;
}
.nav ul li:first-child a {
margin-left: -900%;
padding-left: 900%;
}
.nav ul li:last-child a {
margin-right: -900%;
padding-right: 900%;
}
.nav ul li:hover a {
color: #cf383c;
background: none;
}
.nav ul ul {
position: absolute;
left: 10px;
right: 0;
display: none;
z-index: 5;
}
.nav ul ul li {
position: relative;
margin: 0;
border: none;
}
.nav ul ul li a, .nav ul li:hover ul li a {
width: 140px;
display: block;
background: #d0353e;
color: #ffe597;
font-size: 18px;
margin: 6px 0 0 0;
padding: 0;
line-height: 26px;
text-align: center;
border-radius: 12px;
}
.nav ul ul li a:hover, .nav ul li:hover li a:hover {
color: #fff;
}
#content {
width: 100%;
float: left;
border-top: 3px solid #fce696;
margin: 20px 0 0 0;
}
#content p {
font-size: 14px;
padding: 10px 0;
}
Can you please tell me how can I fix that for chrome and safari.
Thanks in advance
you need to set width to .nav > ul > li to fix this issue
.nav ul li:first-child, .nav ul li:last-child {
width: 165px;
}
its working fine
http://demo.sumedhasoftech.com/manoj/test/test.html