I am having a hard time positioning my drop down menus within my Wordpress Theme Navigation. They are showing up no where near the nav bar and are near the top left corner of the screen when I hover over a ul li >.
My CSS Is Below:
#main-navigation {
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
margin-right:20px;
border-bottom: 2px solid #6a6a65;
color: #181818;
display: block;
font-weight: bold;
height: 48px;
line-height: 48px;
padding: 0 29px;
// text-shadow: 0 1px 0 #AD581D;\
text-transform:uppercase;
}
#main-navigation > ul > li:first-child > a {
background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
// border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
overflow: hidden;
padding: 0 25px;
text-indent: -999px;
width: 31px;
}
#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;
}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
border-bottom: 1px solid #333333;
display: none;
left: 0;
padding-top: 20px;
position: absolute;
top: 148px;
white-space: nowrap;
z-index: 1000;
background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
background: none repeat scroll 0 0 #3C3C3D;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #2C2C2C;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
float: none;
font-size: 16px;
}
#main-navigation ul ul li:first-child {
border-top: medium none;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
color: #FFF;
display: block;
height: 48px;
line-height: 48px;
padding: 0 29px;
text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }
Any help would be greatly appreciated as I have spent a long time looking for the error its starting to frustrate me.
Thanks a bunch guys!
You need to tell childs to absolute position from main-navigation and not screen by defaut, Iguess since HTML code is missing :)
#main-navigation {
position:relative; /* tells absolute child to take coordonates from here */
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
Related
The css for my page goes for awhile. There are 2 files which are imported in the head section of my master page. One is the default.css page and the other is menu.css. I tried to add padding and my nav bar flickered over to the right for a split second, but it came right back. I have read in numerous posts about adding space to use padding between the list items but there is a lot of confusing css and classes. I"m not sure which sections of the css will fix the spacing between the menu items
If someone can help me figure this out, that would be terrific. Here is my .css code and html
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold">
<li class="dropdown active">
HOME
</li>
<li class="dropdown">
RESOURCES<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>REVERSE MTG FAQ</li>
<li>OTHER RESOURCES</li>
</ul>
</li>
<li class="dropdown">
OUR PROCESS<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>LOAN PROPOSAL</li>
<li>PROCESSING</li>
</ul>
</li>
<li class="dropdown">
GET QUOTE
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
.css
/* --- header -- */
header {
background: url(../img/menubackground.png) repeat;
margin: 0 0 0 0;
width: 762px;
padding: 10px 0 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
position: relative;
z-index: 2000;
text-align: left;
}
/* --- menu --- */
header .navigation {
float: left;
}
header ul.nav li {
border: none;
margin: 0;
}
header ul.nav li a {
border: none;
font-weight: 400;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 1px;
}
header ul.nav li ul li ul {
margin: 1px 0 0 1px;
}
header ul.nav li a i {
color: #fff;
}
.container,
.navbar-static-top .container {
width: 750px;
}
.container {
margin-right: 0;
margin-left: 0;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background: #333333;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
font-weight: 600;
}
.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
background: #333333;
outline: 0;
font-weight: 600;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0px 10px 0 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 2px 15px 2px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position: absolute;
right: 0;
margin-top: 3px;
padding-left: 20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right: none;
border-left: none;
}
.navbar .nav > li > a {
float: none;
font-size: 15px;
margin-left: 0px;
margin-right: 0;
text-decoration: none;
text-shadow: none;
border-right: none;
border-left: none;
color: #fff;
border: 2px solid transparent;
padding: 4px 5px 4px 5px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
padding: 4px 5px 4px 5px;
background: #343434;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border: 2px solid #302f2f;
padding: 4px 10px 4px 10px;
background-image: none;
background: #343434;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > a i[class^="icon-"] {
color: #fdfdfd;
}
ul.nav li.dropdown a {
z-index: 1000;
display: block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left: 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right: 50px;
}
select.selectmenu {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 165px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #386A57;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
border-top: none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
color: #ddd;
font-size: 15px;
padding: 5px 7px 5px 7px;
margin: 0;
text-shadow: none;
border-bottom: 1px solid #303030;
text-decoration: none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat:inherit;
filter: none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0;
}
.dropdown-menu li:hover .sub-menu-level1 {
visibility: visible;
}
.dropdown-menu li li:hover .sub-menu-level2 {
visibility: visible;
}
My website is
http://www.jokerleb.com
I want the right column to be on the right, and the left to be on the left. All columns must have the same margin between them. In summary I don't want the menu to be centered.
The menu itself is float: left I can't see any margin that is forcing it to the center, and I don't know what div is centralizing it. Any idea why it's centered?
The css of the menu
.header_menu_res ul,
.header_menu_res ul ul,
.header_menu_res ul ul ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.header_menu_res ul li.first {
padding-left: 0;
background: none;
}
.header_top .header_top_res p a{
color: #FDC300 !important;
}
/*menu font color*/
.header_menu_res ul li a {
color: #FDC300;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
.header_menu_res ul {
z-index: 99;
margin: 3px;
padding: 0;
list-style: none;
line-height: 1;
}
.header_menu_res ul a {
padding: 5px 10px;
position: relative;
color: #555;
z-index: 100;
display: block;
line-height: 18px;
text-decoration: none;
}
.header_menu_res ul li:hover a {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li.current_page_item,
.header_menu_res ul li.current-menu-item,
.header_menu_res ul li.current-menu-parent a {
color: #555;
background: #f4f4f4;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li li.current_page_item,
.header_menu_res ul li li.current-menu-item {
background: none;
}
.header_menu_res ul li.current_page_item a,
.header_menu_res ul li.current-menu-item a {
color: #555;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.children li a {
background: #fff;
border-top: none;
border-left: none;
}
.header_menu_res ul li {
float: left;
/
font: normal 14px/1.2em Arial, Helvetica, sans-serif;
z-index: 999;
margin: 0 0 20px;
width: 25%;
}
.menu-item i._mi, .menu-item img._mi {
display: block;
float: left;
}
.menu-item span {
margin-top: 8px;
display: block;
margin-left: 60px;
}
.header_menu_res ul li ul {
margin-top: -2px;
background: #fff;
position: absolute;
left: -999em;
width: 180px;
border: 1px solid #dbdbdb;
border-width: 1px 1px 0;
z-index: 998;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu ul ul.children {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu li ul li {
margin: 0;
padding: 0px;
}
.header_menu_res ul.menu li ul li a {
background: none;
padding: 7px 12px;
width: 156px;
color: #555;
font-size: 14px;
line-height: 18px;
}
.header_menu_res ul.menu li ul li a:hover {
text-decoration: underline;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.menu li ul ul {
margin: -32px 0 0 181px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul.sub-menu {
display: none;
position: absolute;
margin: -2px 0 0;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {
display: none;
top: 2px;
left: 180px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul li:hover,
.header_menu_res ul li.hover {
position: static;
color: #555555;
}
.header_menu_res ul li:hover ul ul,
.header_menu_res ul li:hover ul ul ul,
.header_menu_res ul li:hover ul ul ul ul {
left: -999em;
}
.header_menu_res ul li:hover ul,
.header_menu_res ul li li:hover ul,
.header_menu_res ul li li li:hover ul,
.header_menu_res ul li li li li:hover ul {
left: auto;
}
.header_menu_res ul li img.dropdown {
padding: 2px 0 2px 8px;
border: none;
}
.header_menu_res ul.sub-menu {
width: auto;
}
.header_menu_res ul.sub-menu li {
clear: left;
margin: 8px 4px 0;
}
/* category menu */
div#adv_categories,
.header_menu_res ul.sub-menu {
margin: -2px 0 0 0;
padding: 0 0 8px;
position: absolute;
background: #fff;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
div#adv_categories {
display: none;
padding: 0 5px 8px;
}
#menu-header li:hover #adv_categories,
.header_menu .menu li:hover #adv_categories {
display: block;
}
Do the changes like this,
.header_top_res{
width:90%;
}
Here's the js fiddle : http://jsfiddle.net/7dbemt0k/
I used below code to make divider.
box-shadow: 1px 0 #111111,
2px 0 #777777;
But I want it to be longer, from very top to very bottom across border-bottom.How do I increase the length or shall I use something like vertical tag? Please advise.Thanks.
HTML
<ul class="sf-menu">
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/">
<img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'></a>
</li>
<li>
About Us
<ul>
<li>
Centre-Point of Web Projects
</li>
</ul>
</li>
<li>
Branches
<?php Core::getHook('block-branches'); ?>
</li>
<li>
News
</li>
<li>
Events
</li>
<li>
Contact Us
</li>
</ul>
<div class="clear"></div>
CSS
/* Main */
.sf-menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background-color: #2D2D2D;
/*background-image: linear-gradient(#444, #111);*/
border-bottom:6px solid #072438;
/*border-radius: 50px;*/
/* box-shadow: 0 2px 1px #9c9c9c;*/
box-shadow: 2px 1px #393939;
}
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
.sf-menu a {
float: left;
height: 20px;
padding: 0 25px;
color: #999;
/* text-transform: uppercase;*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.sf-menu li:hover > a {
color: #fafafa;
}
*html .sf-menu li a:hover { /* IE6 */
color: #fafafa;
}
.sf-menu li:hover > ul {
display: block;
}
/* Sub-menu */
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
.sf-menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111,
0 2px 0 #777777;
border-bottom:none;
}
.sf-menu ul li:last-child {
box-shadow: none;
}
.sf-menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.sf-menu ul a:hover{
margin-left:10px;
}
*html .sf-menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html .sf-menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
/* active menu*/
/*end */
.sf-menu ul a:hover {
/*background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);*/
}
.sf-menu ul li:first-child a {
/*border-radius: 5px 5px 0 0;*/
}
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #072438;
}
.sf-menu ul li:first-child a:hover:after {
border-bottom-color: #072438;
}
.sf-menu ul li:last-child a {
/*border-radius: 0 0 5px 5px;*/
}
/* Clear floated elements */
.sf-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sf-menu ul li a:last-child{
box-shadow: 0 0 #111111,
0 0 #777777;
}
* html .sf-menu { zoom: 1; } /* IE6 */
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */
remove padding: 10px 0 0 0; from .sf-menu and change the padding on .sf-menu li to padding: 10px 0;
FIDDLE
UPDATE
Because the box-shadow is outside of the element's natural width you just have to add some spacing to the li's using margin
.sf-menu li {
float: left;
padding: 10px 0;
margin: 0 0 0 2px; <---- //add margin
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
NEW FIDDLE
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0px #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
**height:40px;**
}
I don't quite understand yr question but u mentioned that u wanted to increase the vertical divider, you just have to set the height of the li
I've been trying to solve this problem for quite some time now. I need my navigation to be responsive. By responsive, i need my nav to still show its links when minimized and dragged to the very left. What my code does now is that the links disappear as if there is no nav bar at all when minimized. Thank you in advance!
Normal view (which is also how i need my nav to look like when minimized)
Current minimized window
Here is my drop down menu code for our CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 800px;
margin: 60px auto;
margin-top: -30px;
margin-bottom: 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #ffffff;/*bg color of drop down menu*/
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999; /* home my acct etc */
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
#menu li:hover > a { /*font color of nav while hover */
color: #000000;
background: #FFE87C; /* blue */
}
*html #menu li a:hover { /* IE6 only */
color: #000000;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background:#FFE87C; /* bg color ng drop down yellow */
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: auto;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: black; /* font color of drop down */
}
#menu ul a:hover {
background-color: #EDDA74;/*hover of link blue*/
color:#000000;
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #D1D0CE;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #D1D0CE;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #48CCCD;
display: none;
box-shadow: none;
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}
#menu ul li{
margin-left: 20px;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
}
I think you should try to set the "html, body" tags in your CSS with min-width: x% / xpx, x being your choice, e.g. min-width: 700px or min-width: 75%
I'm encountering two problems in Internet Explorer at the moment. The first is my navigation menu: the links are stacking on top of each other instead of going across the bar. Here is my code for the nav menu.
HTML
<div class="main-navigation" role="navigation" style="margin-top: 5px;">
<div class="nav-menu"><ul><li class="page_item page-item-8">design your own</li><li class="page_item page-item-10">fan photos</li><li class="page_item page-item-12">Win a free T-shirt</li></ul></div>
</div><!-- #site-navigation -->
CSS
.main-navigation li {
margin: 0px 20px 0px 0px;
position: relative;
text-align: center;
padding: 7px 0px;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #cb0000;
font-weight: bold;
}
The second problem is with my two ribbons I have for titles in the side bar.
The right bottom flap that gives it the wrap around look is not showing up.
HTML
<div class="ribbon"><strong>SPECIAL OFFERS</strong></div>
CSS
.ribbon {
padding-bottom: 7px;
padding-top: 8px;
padding-left: 3px;
color: #fff;
text-shadow: 1px 1px 0px #c1c1c1;
font-size: 15px;font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
letter-spacing: 5px;
position:relative;
width:267px;
right:0px;
top:19px;
background-color:#212121;
-moz-border-radius:2px 0px 0px 2px; /*radius of 2px*/
-khtml-border-radius:2px 0px 0px 2px;
-webkit-border-radius:2px 0px 0px 2px;
-webkit-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
-moz-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
}
.ribbon:after {
content:'';
width:0;
height:0;
border-color: #000 transparent transparent #000;
border-style:solid;
border-width:5px 5px;
position:absolute;
right:0;
bottom:-10px;
}
This code works in other major browsers, but not in IE.
For the first issue you should add anywhere you have display: inline-block for ie
zoom: 1;
*display: inline
Update
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
*display: inline
zoom: 1;
text-align: center;
width: 100%;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
*display: inline
zoom: 1;
text-decoration: none;
}
From the link you provided