I have a menu that has a nice dropdown and everything, but the only problem I have here is that I can't find a way to move this damn drop down just a little bit to the left so it is directly under its parent tab!! It is always to the side, I see other people's examples and when I add padding between the menu tabs it does the same exact thing! Perhaps it is because of that padding?? (I'm talking about this: http://jsbin.com/gimilapiki/edit?html,css,output)
So, here is my project: https://codepen.io/anon/pen/gxdVdO?editors=1100
Here's some code (because StackOverFlow forces me to):
body {background-color: #E8E8E8;}
ul {list-style: none;}
li {
float: left;
background-color: white;
}
li:not(.search) {padding: 12px 20px 12px 20px;}
li ul {
display: none;
position: absolute;
padding-left: 1px;
padding-top: 12px;
}
a {
text-decoration: none;
color: #5E5E5E;
}
li:not(.search):hover {
color: black;
background-color:#E3E3E3;;
}
ul li ul li {
float: none;
background-color: #E3E3E3;
}
ul li ul li:not(.search):hover {background-color: #D1D1D1;}
li:hover > ul {
z-index: 289;
display: block;
padding: 0 10px 20 20px;
}
.search-input {
width: 150px;
height: 18px;
padding: 0 7px;
border: 1px solid grey;
border-radius: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
}
.search-input:hover {
outline: none;
opacity:0.99;
cursor: pointer;
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.05) inset;
}
input:focus {outline: none;}
#search-icon {
height: 18px;
}
.search {
padding-bottom: 10px;
}
form {
margin-top: 4px;
}
I'm seriously stuck on this simple problem. Adding padding-left or padding-right or margins did nothing, it only affected the vertical height of the tabs and nothing else. I tried everything, researched as much as I can, and nothing worked. Please help!!!
you can add something simple like this
li ul {
display: none;
position: absolute;
padding-left: 1px;
margin-left: -10px;
padding-top: 12px;
}
i added the margin-left: -10px; and i think it works
ul > li{
position: relative;
}
ul > li > ul{
position: absolute;
top: 100%;
left: 0px;
}
try to add this.
Just add position as relative.That will solve your problem.
li ul {
display: none;
position: relative;
padding-left: 1px;
padding-top: 12px;
margin-right:100px;
}
Related
My website's menu drop down seems to malfunction and it is stuck on the screen. Don't know how to fix http://www.kingadlerhomedecor.com/store/
I want to add more sub categories to this drop-down, but I wish to avoid making the drop down list too lengthy. I thus want 2 rows here in the drop-down to adjust the length list of sub-categories, but it doesn't seems to happen, instead there is a new problem - The drop-down menu item is half stuck and I am unable to fix this.
I have not made any changes and yet it seems to malfunction. No clue how to fix the dropdown menu stuck on my screen. Please advice.
/* MENU */
.primary-define #menu {
text-align: left;
font-family: helvetica, Arial;
/*background-color: #999;*/
}
.primary-define #menu-inner {
position: relative;
font-family: helvetica, Arial;
background-color: #999; /*No color was added origninally - added to make it grey*/
}
.primary-define .mainmenu {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.primary-define .mainmenu li {
margin: 0;
padding: 0;
position: relative;
}
.primary-define .mainmenu > li {
float: left;
/*background-color: #999;*/
}
.primary-define .mainmenu li a {
color: #666; /*originial #666*/
display: block;
font-size: 10px; /*original 15px */
padding: 0.5px 1px; /*20px 25px */ /*Padding for the dropdown elements*/
text-decoration: none;
/*background-color: #999;*/
}
.primary-define .mainmenu > li > a {
color: #fff;
padding: 15px 25px; /*35px*/
font-size: 14px; /*original 18px */
font-weight: 600;
line-height: 100%;
font-family: helvetica, Arial;
}
.primary-define .mainmenu > li:hover > a,
.primary-define .mainmenu > li.active > a {
background-color: rgba(0, 0, 0, 1); /*rgba(0, 0, 0, 0.2)*/
/*font-size: 15px;*/
}
.primary-define .mainmenu li .dropdown-container {
top: 99%;
overflow: hidden;
position: absolute; /*absolute*/
padding-left: 1px; /*added by yuvi*/
font-size: 30px; /*added by yuvi*/
}
.primary-define .mainmenu li .dropdown {
margin-top: -300px; /*-999px*/
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px; /*added by yuvi*/
padding: 10px;
}
.primary-define .mainmenu li:hover .dropdown {
margin-top: 0;
/*font-size: 30px; added by yuvi*/
}
}
.primary-define .mainmenu ul {
margin: 0;
float: left;
width: auto; /*249px*/
list-style-type: none;
border-right: 1px solid #eee;
}
.primary-define .mainmenu ul li:hover a,
.primary-define .mainmenu ul li.active a {
background-color: #eee; /*orginiarl #eee*/
margin-top has to be -380px.
.primary-define .mainmenu li .dropdown {
margin-top: -380px;
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px;
padding: 10px;
}
I'm currently building a website using only HTML/CSS3. It displays perfectly on all desktop browsers but not in mobile Safari (which is crucial). The site is currently under construction here: test.scccjapan.com and the problem is with the drop down navigation menu ("blackboard - grammar - verbs" list).
The list is particularly long, but when scrolling down the page to get to the bottom of the list, the menu closes making it impossible to click on any of the links.
After a lot of trial and error, I seem to have narrowed the problem down to the overflow:scroll attribute. If I delete this attribute from the CSS, the menu works perfectly fine, HOWEVER, I also have a fixed background image and deleting the overflow turns the background image from a fixed state into something more like a scroll which is also not what I'm looking for. It seems I can either have:
(a) a fully-functioning menu and a scrolling (static) background or
(b) a fixed background and a "broken" menu.
Short of redesigning this section of my site to cater for this issue, can anyone help!? I don't know Java and a relative noob when it comes to coding so specific information would be useful. I've also scoured the internet for answers and tried anything I could find but to no avail.
Thanks in advance! :)
Here's my CSS (let me know if you need something more):
html {
background: url(Backgrounds/Totoro.png);
background-position: bottom right;
background-repeat: no-repeat;
background-size: 40%;
background-attachment: fixed;
background-color: #666;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
-webkit-overflow-scrolling: touch;
min-width: 900px;
max-width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
}
#Menu {
text-align: center;
white-space: normal;
font-size: 15px;
font-weight: bold;
}
/* Main Menu */
#Menu nav ul {
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: left;
text-shadow: 0px 1px 1px #fff;
z-index: 99;
-webkit-transform: translateZ(0);
}
#Menu nav img {
height: 65px;
width: 65px;
}
#Menu nav ul li a:hover {
color: #4ed1fe;
background: #bfbebe;
}
#Menu nav ul:after {
content: "";
clear: both;
display: block;
}
#Menu nav ul li {
float: left;
}
#Menu nav ul li:hover {
background-color: #383838;
box-shadow: inset 0px 0px 2px 2px #535353;
}
#Menu nav ul li a {
display: block;
padding: 10px 6px;
color: #262626;
text-decoration: none;
}
#Menu nav ul li:hover a {
cursor: pointer;
color: #fff;
text-outline: #000;
text-shadow: 2px 0px 5px #000;
}
/* Year Levels */
#Menu nav ul ul {
background: #5d5d5d;
border-radius: 1px;
position: absolute;
top: 100%;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom: #9ca7b5 1px solid;
display: none;
box-shadow: 2px 0px 5px #000;
}
#Menu nav ul ul li {
float: none;
position: relative;
}
#Menu nav ul ul li a {
padding: 10px 80px 10px 10px;
color: #fff;
border-top: #fff 0px inset;
}
#Menu nav ul ul li a:hover {
color: #0CF;
background: #bfbebe;
}
#Menu nav ul li:hover > ul {
display: block;
}
/* Terms */
#Menu nav ul ul ul {
position: absolute;
left: 90%;
box-shadow: 0px -3px 100px #000;
top: 10px;
white-space: nowrap;
}
What I am doing:
On hover of a button I am addding a border-bottom of 5px.
JS FIDDLE: http://jsfiddle.net/mUCNB/
Problem:
The problem is the border bottom extends 1px too far on both the left and right side.
Question:
Does anyone know how to fix this?
Relevant Code:
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}
#main-nav a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}
Since CSS borders 'miter' at the edges, you're going to notice that phenomenon. To work around this, I've created rules to highlight the li BEHIND the a that is on hover. This creates the effect that you are getting a clean border at the bottom. You can retain those white separators between your elements too then.
Forked Fiddle
CSS
* {
margin: 0px;
padding: 0px;
outline: none;
}
#header {
background-color: #00a0c8;
min-height: 118px;
}
#headerContent {
width: 980px;
min-height: 118px;
margin: 0 auto;
background-color: #00a0c8;
}
nav {
width: 980px;
margin: 0 auto;
}
nav li {
border-left: 1px solid #fff; /* Added border to nav li */
display: block;
float: left;
height: 50px; /* Give it height */
}
#main-nav li:hover {
background: #0BC6F5; /* Give background color to li on hover */
}
nav li:first-child {
border-left: none;
}
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
}
#main-nav li a:hover {
height: 30px;
}
Hope that helps.
you can solve this issue by removing the border-left and border-right styles from the following:
updated css:
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:last-child {
width: 224px;
}
updated fiddle
Also a neat trick is to just use box-shadow instead, to apply the conflicting border:
#main-nav a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}
This works, if you just replace your current hover selector!
if you want to try it first, here's another fiddle:
http://jsfiddle.net/4zzMA/
I am facing some problem with this drop down menu thing. I read your article and it helped me. In the beginning, the drop down worked but when I added some more styling then it stopped working. Other divs and navigation bar is working fine but the drop down menu is not working. Can you please help me pointing out what should be corrected here?
The parent div is nav-bar-left and the style is
.nav-bar-left {
float; left;
overflow: hidden;
width: 980px;
height: 26px;
background-color: Lavender;
border: 1px solid MidnightBlue;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
The navigation div is #horizontalmenu which resides within the above parent div and the style is
#horizontalmenu {
width: 733px;
margin: 0;
position: relative;
float: left;
padding: 0;
}
Rest of the styling for navigation bar is
#navbar {
list-style-type: none;
margin: 0;
width: 100%;
padding: 0;
position: relative;
display: inline-table;
height: 26px;
z-index: 5;
}
#navbar li {
float: left;
position: relative;
}
#navbar a:link, #navbar a:visited {
display: block;
color: #333;
background-color: lavender;
text-align: center;
padding: 6px 10px;
border-style: solid;
border-color: MidnightBlue;
border-width: 0 1px 0 0;
text-decoration: none;
font-size: 14px;
line-height: 14px;
}
#navbar a:hover, #navbar a:active {
color: #fff;
background-color: #6b0c36;
text-decoration: underline;
}
#navbar ul {
left:-9999px;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#navbar ul li {
float:none;
border-style: solid;
border-color: Lavender;
border-width: 0 1px 1px 1px;
}
#navbar ul a {
white-space: nowrap;
}
#navbar li:hover ul {
left: 0;
}
#navbar:hover a {
text-decoration: none;
}
#navbar li:hover ul a {
text-decoration: none;
background-color: Lavender;
color: #333;
}
#navbar li:hover ul li a:hover {
background-color: Lavender;
color: #333;
}
So, why is it not working and what can be done?
I found this menu CSS one of my best collection for dropdown menu:
Create a Multilevel Dropdown menu with CSS and improve it via jQuery
And you can find a backup of those codes here in my pastebin.
This is my code for my menu:
/*Menu*/
#menu {
text-align: right;
margin-left: auto;
margin-right: auto;
height: 50px;
position: relative;
z-index: 5;
font-size: 0.75em;
}
#menu ul {
margin: 0;
padding: 10px 5px 5px 5px;
list-style: none;
line-height: normal;
border: 0px solid #03426A;
-moz-border-radius: 6px;
background: #F3F4FF;
position:relative;
width: auto;
float:right;
}
#menu ul li {
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #000;
display: block;
padding: 0px 15px 5px 15px;
text-decoration: none;
text-align: center;
font-size: 1em;
font-weight: normal;
border: none;
}
#menu ul li a:hover {
color: #0A67A3;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 0.9em;
}
#menu li:hover a { color: #0A67A3; }
#menu li:hover li a:hover { color: #000; }
/*End Menu*/
I have tried 2 tutorials however have not found a way of making the menu work in ie 5.5 or 6. How can I fix this?
IE6 doesn't support :hover pseudoclass on elements other than anchor tags. Son of Suckerfish has a solution that may work for you: http://www.htmldog.com/articles/suckerfish/dropdowns/
IE 5.5? Really... Wow I feel sorry for you if you need to still be compatible that far...Legacy corporate app I suppose? Damn!!
IE6 only understands :hover for <a> elements that's for sure. But you can try the solution given here that uses a htc file to create a new css behavior: http://www.xs4all.nl/~peterned/csshover.html