I have a drop-down menu inside a nav. Its parent has a max-width of 500px.
I want the drop-down to open on entire page.
I tried using 100vw but that way the dropdown is not aligned properly.
Additionally I cant move my navbar outside the max width container.
Check the code here - https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Css
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
position:relative;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
Dropdown menu is taking 100vw width but how can I get it to left 0 of entire page??
Remove position: relative from nav.
If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Plz change "nav" class styles or remove the position..
css
nav {
position: static;
}
Related
I have a dropdown menu that is working well except for one minor bug that I cannot solve.
The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused the dropdown menu to shift slightly to the right. If that is the case, what can I do to go around the problem?
It's a simple nav menu that sets the position of the dropmenu item to absolute, and is hidden by the parent element's overflow:hidden feature. On hover, the dropdown menu is brought into view with overflow:visible.
The live site is here -> nav menu
CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<ul>
<li>About
<ul>
<li class="company">Company Profile</li><li class="team">
The Team</li><li class="linsux">
Pricing Packages</li>
</ul></li>
<li>Services
<ul>
<li class="webDesign">Websites</li><li class="Emails">
Landing Pages</li><li class="Logos">
Logos</li>
</ul></li>
</li>
<li>Case Studies</li><li>
Blog</li><li>
Contact</li><li>
Free Web Analysis</li>
</ul>
</div>
</div>
It because you use to indent the submenu % of parent width which isn't the same. margin-left: -3em is a constant.
Use, for example:
left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;
Not sure why you indent by 60% and the move the submenu back using -3em.
try the following :
#mainMenu ul ul {
left: 39% !important;
}
Or
#mainMenu ul ul {
left: 0;
margin-left: 0;
}
I'm trying to make my website fully responsive, and I'm stumbling upon the navigation bar; I cannot seem to make it responsive. My coding is as following:
<div class = "navbar" >
<nav>
<ul>
<li>Collectie
<ul>
<li>Zomercollectie</li>
<li>Wintercollectie</li>
<li>Kerstcollectie</li>
</ul>
</li>
<li>Over ons</li>
<li>Contact</li>
</ul>
</nav>
</div>
And the CSS as following:
.navbar
{
height: 50px;
width: 920px;
max-width:100%;
background-color:#2d2d2d;
margin-left:auto;
margin-right:auto;
}
/* NAVBAR CSS */
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul {
background:#2d2d2d;
color:ffffff;
font-size:30px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: 0;
}
nav ul:after
{
content: "";
clear: both;
display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a {
display: block;
padding: 7px 93px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
background: #5f6975;
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;
}
/* END of NAVBAR CSS */
I would like to make it scale the whole thing, including fonts when they are too big, and without the buttons stacking vertically.
Any idea?
Allright, i've fixed it. It was in the height element. I shouldn't have used them at all.
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
I have a menu which is a <ul>. Inside one of the <li>s I have another <ul> to add a depth level, a sub-menu. However, when hovering the <li> to make the sub-menu appear, it's width changes to match the <ul>s. Also, the sub-menu will pull the content area down, and that's not what I want.
I want the <li> to maintain it's width when it's hovered, and the sub-menu to appear on top of the content area.
Here's the jsFiddle: http://jsfiddle.net/Cthulhu/RWjcA/ (If you hover Products, you will see it happen.)
Here's a slightly cleaned up version, and without the need for Javascript: http://jsfiddle.net/dZhQN/2/
HTML
<ul id="nav">
<li><a>Home</a></li>
<li><a>Whatever</a></li>
<li>
<a>Products</a>
<ul>
<li><a>What When How</a></li>
<li><a>Who Why</a></li>
</ul>
</li>
<li><a>Contacts</a></li>
</ul>
<div id="content"></div>
CSS
#nav, #nav ul {
list-style: none;
text-transform: uppercase;
text-align: center;
}
#nav li {
display: inline-block;
position: relative;
}
#nav li a {
display: block;
cursor: pointer;
font-size: 12px;
padding: 24px 20px 15px;
}
#nav > li > a:hover {
color: #FFF;
background: #4A6125;
}
#nav ul {
background: #000;
display: none;
position: absolute;
top: 100%;
left: 50%;
z-index: 999;
width: 150px;
margin-left: -75px;
}
#nav ul li a {
color: #FFF;
padding: 10px;
}
#nav ul li a:hover {
text-decoration: underline;
}
#nav li:hover ul {
display: block;
}
#content {
background: gold;
height: 200px;
}
You can simply give a fixed height to that Div
#main_menu .menu {
list-style: none outside none;
text-align: center;
text-transform: uppercase;
height:60px;
}
Hope this will help...
I put in a lot of relative and z-index because it seems like that's what I need to do but I'm confused.
the HTML is:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body id="body">
<div id="wrap" class="opaque">
<!-- header n menu area -->
<div id="header">
<div id="logo">
<img src="images/logo.jpg" width="918" height="142" /> </div>
<div id="menu" >
<ul id="nav">
<li>HOME
<li>DOORS
<ul id="dropm">
<li><a href="pivot.html"> PIVOT </li>
<li> <a href="entry.html">ENTRY </li>
<li> <a href="bifold.html">BIFOLD </li>
<li> <a href="internal.html">INTERNAL </li>
</ul>
</li>
<li >WINDOWS</li>
<li > TIMBER FLOORING </li>
<li>STAIRCASES</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
#wrap {
background-color:#FFF;
width: 960px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/*header area*/
#logo {
width:940px;
padding-top: 20px;
padding-left: 20px;
}
#menu {
background-color: #990000;
height:40px;
margin-bottom:200px;
margin-bottom-color:none;
margin-left:auto;
margin-right:auto;
z-index:1;
position:relative;
}
* html #menu {
z-index:2;
height:35px;
}
#nav {
margin-left: 30px;
position:relative;
}
#nav li{
display: inline;
list-style: none;
color: #FFF;
margin-right: 10px;
padding-right:3px;
font-weight:bold;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li { /* all list items */
float: left;
position: relative;
}
#menu li {
display: inline;
list-style-type: none;
margin-right: 10px;
padding-right: 50px;
color: #ffffff;
padding: 10px 15px 8px 15px;
/* background-color:#2C5463;*/
position:relative;
float:left;
white-space: nowrap;
}
li ul {
display:none;
position: absolute;
top: 1.5em;
left: 0.2em;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
margin-top: -40px;
margin-left: -7px;
}
ul li a:hover, ul li a.hover {
background:#FF6600;
}
li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:20px;
margin-left:-5px;
text-align:left;
width: 40px;
}
* html li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:17px;
text-align:left;
width: 40px;
}
#nav li:hover li, #nav li.hover li {
float: left;
}
#nav li:hover, #nav li.hover {background:#CC6600; position:relative;}
#dropm { z-index:1000;}
#dropm li {
width:60px;
background:#990000;
}
#dropm li{
display:block;
list-style-type: none;
width:58px;
color: #FFF;
border-top: 1px solid #fffff;
color: #ffffff;
padding: 10px 15px 10px 15px;
background: #990000;
white-space: nowrap;
}
* html ul li { float: left; }
* html ul li a { height: 1%; }
Found it,
have to change the wmode to transparent