This is how page looks:
First problem, that
If you look closer at this, it's a bit transparent, we can see div main behind this ul inside ul.
Second if we zoom the browser up... this happens
I would like this text no nowrap, just 3 and 4 li element won't fit in this zoomed screen and we won't see this.
And for last
I would like main to fit the rest of the screen we got (at least the rest, until there is no content that goes in width or height more)
To look like this:
Just main to at Minimum fill rest of the free space on website, and I don't want to do it by whole body background color declaration.
Whole code:
html:
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
Related
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 am making a drop down menu using only HTML and CSS. The menu components are successfully dropping down and everything looks good except when there are two or more components to an element. Then the second one covers the first. I was able to fix this by putting "position: absolute" in "#nav ul li:hover ul" (code below), but then the first item does not clear the menu bar.
Sorry for the terrible description.
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS/index.css" />
<title>Index</title>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
Here is the CSS
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
position: absolute;
background-color: #ff0000;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
Please check the below code. I have slightly modified your css.
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
padding: 0;
background-color: #ff0000;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li ul li{
background: none;
float: none;
display: block;
}
#nav ul li ul li a {
display: block;
float: none;
background-color: #ff0000;
}
#nav ul li ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
pls replace your entire css with this one
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top: 100%;
padding: 0;
margin: 0;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
float: none;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
#nav ul li li {
float: none;
}
The main dropdown trigger should be #main, the dropdown #nav and #header both have the MAIN PARENT #main. Set #main 'position: relative;' and set a height let's say 50px 'height: 50px;' THEN set #nav 'position: relative; top: 100%;' and the height of #header to 50px as #main.
#main { position: relative; height: 50px; }
#header, #nav { position: absolute; }
#header { width: 100%; height: 100%; top: 0; left: 0; }
#nav { top: 100%; left: 0; min-height: 100px; } /*set it to left or right 0*/
Now the dropdown should trigger on #main:hover #nav { display: block !important; }
Now you must style your dropdown as you want
Modify the below css :
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
Complete code:
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<style>
body {
background-repeat: no-repeat;
background-size: 100% auto;
}
#main {
background-color: #00ccff;
width: 70%;
}
ul {
list-style: outside none none;
}
#header {
background-color: blue;
text-align: center;
width: 100%;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0;
}
#nav {
width: 100%;
}
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav a {
background-color: #00ccff;
padding: 1vw 3vw;
text-decoration: none;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul {
clear: both;
display: block;
float: none;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
</style>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>
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