Hi Need to center my 1000px width submenu to the page.
I believe my problem lies in:
position: absolute;
top: 23px;
left: 50%;
The website is: http://dev.timson.me (Submenus on "Upcoming" & "Past Productions")
And the CSS is:
#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
padding-top: 8px;
width: 100%;
font-family: Stag;
display:block;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
display:inline-block;
}
.sub-menu {
text-align: center;
}
#menu-default > li {
float: left;
position: relative;
}
.sub-menu > li {
display: inline-block;
}
#access a {
color: #eee;
display: block;
line-height: 25px;
margin-top: -4px;
margin-bottom: -4px;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
display: none;
float: left;
margin-top: 0;
position: absolute;
top: 23px;
left: 50%;
width: 1000px;
z-index: 99999;
margin-left:-500px;
text-align:center;
padding-top:5px;
padding-bottom:10px;
background: red;
}
#access ul ul a {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom:10px;
}
#access ul li:hover > ul {
display: block;
}
Any help is greatly appreciated.
Cheers,
Peter
Try removing position: relative; from your main navigation #menu-default > li and add position: relative; to the main #access ul
Related
I am trying to create a hamburger menu for when my screen goes below 1025px but for some reason there is a small gap between my nav and my menu div whenever I make the window use the media query. I am not sure why it is there. When I use developer tools I find no margins around either of them.
nav #menu{
position: relative;
z-index: 999;
float: right;
margin: 0 75px 0 0;
line-height: 50px;
}
nav #menu li{
font-family:"Abril Fatface";
display: inline-block;
padding-left: 50px;
}
nav #menu li a{
color: white;
position: relative;
text-decoration: none;
}
nav #menu li a:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0%;
border-bottom: 2px solid #c1c1c1;
transition: .3s;
}
nav #menu li a:hover:after{
width: 100%;
}
nav #menu li a:hover{
color: #c1c1c1;
}
#media (max-width: 1024px){
.hamburger{
float: right;
cursor: pointer;
padding: 15px;
display: block;
border-left: .1px solid white;
}
.line{
border-bottom: 4px solid white;
width: 35px;
margin-bottom: 5px;
}
.line:last-child {
margin-bottom: 0;
}
nav #menu{
width: 100%;
overflow: hidden;
padding-right: 0px;
margin: 0;
line-height: 25px;
/* height: 0;*/
}
nav #menu li{
display: block;
width: 100%;
background-color: black;
}
nav #menu li a{
width: 100%;
}
.open{
height: auto;
}
Perhaps try specifying:
nav {
margin: 0 auto;
}
I have a dropdown menu which isn't showing in front of the elements below it. I have set the ul and it's container to position: absolute; and position: relative; respectively and applied a z-index of 9999 to the dropdown, however it won't work and the dropdown appears behind the div below it.
Please find the CSS below or both the CSS & HTML in this JSFiddle.
#menu {
overflow: hidden;
padding: 0 0 9px 0;
}
#menu ul {
padding-top: 8px;
}
#menu li {
width: 160px;
float: left;
text-align: center;
position: relative;
}
#menu li:after {
width: 1px;
height: 9px;
background: #9098bf;
position: absolute;
top: 5px;
left: 0;
content: "";
}
#menu li:first-child:after {
display: none;
}
#menu li ul li:after {
display: none;
}
#menu li ul:after {
content: "";
height: 1px;
clear: both;
}
#menu > .container > ul > li > ul {
left: 0;
}
#menu li ul {
position: absolute;
right: -100%;
left: 100%;
z-index: 9999;
background-color: #67b9e8;
}
#menu a {
font-size: 10px;
text-transform: uppercase;
line-height: 12px;
color: #22317f;
font-family: 'FuturaBT-Book';
}
#menu a:hover {
text-decoration: none;
color: #67b9e8;
}
.features {
background: #22317f;
padding-top: 38px;
padding-bottom: 33px;
overflow: hidden;
margin-bottom: 44px;
}
.features .left {
width: 640px;
float: left;
border-right: 1px dotted #fff;
color: #fff;
margin-bottom: -3px;
padding-right: 57px;
text-align: justify;
}
h1 {
font-size: 55px;
line-height: 50px;
margin: 10px 0 29px 0;
text-align: left;
letter-spacing: -3px;
font-family: 'FuturaBT-Book';
color: #193889;
}
ul, li {
list-style: none;
}
Your problem is NOT z-index not working. You have added to your #menu overflow:hidden.
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/
i am trying to create a drop-down menu with rounded corners and have nearly got there but for a small issue in IE. If you view this link (http://ids-ind.com/koris/dropdown.html) in FF it looks and works fine but in IE the right hand side has a flat top.
Please can you advise what i need to do/change to get it looking like it does in FF?
Below is the CSS i am using
a:link {text-decoration:none;}
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0 0 0 1px;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
background:url('../images/menuleft_bg.png') left bottom no-repeat;
line-height:55px;
width:130px;
}
ul.tabs a
{
position: relative;
display: block;
background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 130px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 100%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
/* menu-specifc
*************************/
#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
border-bottom: 0px solid #000;
}
#menu ul
{
margin: 0 auto;
}
#menu ul li h4
{
margin: 0;
}
#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}
#menu ul li a
{
color: #fff;
padding-left: 4px;
}
#menu ul li a img
{
vertical-align: middle;
}
#menu ul li a span
{
display: block;
padding: 0 20px;
text-align:center;
}
#menu ul.dropdown
{
padding: 20px 0;
background-image: url('../images/dropdownbg.png');
overflow:hidden;
border-bottom: 0px solid #dc902f;
width: 130px;
z-index:110;
}
#menu ul.dropdown li a
{
border-bottom: 0px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
background-image: url('../images/dropdownbg2.png');
}
#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}
#menu ul.dropdown li a:hover
{
color:#990000;
}
#menu ul li h4 a:hover
{
background-image: none;
}
remove the position:relative; in below
ul.tabs a{}
I tried to add some social media icons to my header just now and they are about 10 times larger than they should be. I've gone through the css and used firebug and I can't find what is doing this.
I would like them to be their regular size and sit on the top right of the header. Thanks in advance!!
Here's what it looks like ( http://www.bolistylus.com ):
Here's the style.css:
a {
color: #254655;
}
ul, ol {
margin: 0 0 0 5.5em;
}
#page {
margin: 0 auto;
}
body{
background: #f3f3f3;
border-top: none;
border-top: 10px solid #666666;
}
#page {
margin: 0em auto;
width: 1000px;
}
.singular.page .hentry {
padding: 0.5em 0 0;
}
#branding{
background: #f3f3f3;
color: #000000;
border-top: none;
position: relative;
z-index: 2;
}
#site-title {
/*margin-right: 270px;*/
padding: 0.66em 0 0 0;
}
#site-title a {
color: #111111;
font-size: 60px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#branding h1, header#branding a{
text-align: left;
margin-right: 0;
}
#branding span{
text-align: center;
}
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}
#respond{ background: #E7DFD6; }
.welcome{
margin: 15px 60px;
background: #f3f3f3;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}
/* =Menu
-------------------------------------------------------------- */
/*.header_nav ul{
margin: 0;
padding: 0;
text-align: center;
width: 400px;
}
*/
#branding img .sm-img {
height: auto;
margin-bottom: -.66em;
width: 100%;
}
.header_nav {
background: #f3f3f3
}
.header_nav .head-nav {
border-bottom: 1px solid #cfcec9;
border-top: 1px solid #cfcec9;
margin-top: 30px;
padding-top: 5px;
padding-bottom: 5px;
text-align: right
}
.header_nav ul li{
display: inline;
}
.header_nav ul li a{
padding: 10.5px 21px;
color: #000000;
}
.header_nav ul li a:hover, .menu ul li .current{
color: #a8cb17;
text-decoration: none;
}
#access {
background: #f3f3f3; /* Show a solid color for older browsers */
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: center;
position: relative;
display: inline;
}
#access a {
}
#access ul ul {
}
#access ul ul ul {
}
#access ul ul a {
}
#access a:focus {
}
#access li:hover > a,
#access a:focus {
}
#access ul li:hover > ul {
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
You're specifying a percentage width multiple times in your CSS, here are the lines:
style.css (line 70)
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 30%; //remove
}
style.css (line 530)
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%; //remove
}
Remove those and they should display ok.
Try to change your css here:
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 3%; /* 3 not 30 */
}
In style.css line 70
Line 70 of your style.css is setting a width attribute with a value of 30%. This is causing your images to stretch to 30% of their container.
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
Adjust the width to a lower percentage or remove the line entirely.