Ive been making a website with a CSS3 menu. However during the validating process to check if i made no mistakes i broke my CSS3 menu. The menu itself works but theres no drop down menu when hovering "Categorieen" like it did before.
Heres the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Website Ronald</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css"/>
<style type="text/css">
html {
background: url(images/image2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
</style>
</head>
<body style="margin:0px;padding:0px;overflow:hidden">
<ul id="menu">
<li>Home</li>
<li>Categorieën</li>
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
<li>Over</li>
</ul>
<div align="center">
<iframe src="home.html" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden; height:90%;width:75%;position:absolute;top:60px;left:160px;right:0px;bottom:10px" width="75%" height="90%" name="frame_a" marginheight="5" frameborder="0"></iframe>
</div>
</body>
</html>
And this is the CSS im using:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#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: #444;
background: linear-gradient(#444, #111);
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*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#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 #444;
}
#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 #3b3b3b;
}
#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 {
border-radius: 0 0 3px 3px;
}
Since your submenu must appear while hovering "Categorieen" and since your css to make it visible look like #menu li:hover > ul
The <ul> element containing your submenu must be inside the <li> representing "Categorieen"
So instead of
<li>
Categorieën
</li>
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
You should have
<li>
Categorieën
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
</li>
Here is the jsfiddle representing your corrected menu
Related
the drop down menu disappears before you can click on a link. i thought it was a confict with the slider but even if i get rid of it i still have the issue. the site is tourismreddeer.com
here is the html:
<ul class="headerNav">
<a class="btnHome" href="/"><span>Home</span></a>
<li>About Red Deer<img src="/images/link_photo_about.png" width="81" height="81" />
</li>
<li>Events & Attractions<img src="/images/link_photo_events.png" width="81" height="81" />
<ul class="sub-menu sub-events">
<li>Red Deer & Area Events</li>
<li>Business Listings</li>
<li>Mud Hero</li>
</ul>
</li>
<li>Plan Your Trip<img src="/images/link_photo_holiday.png" width="81" height="81" /></li>
<li>Places to Stay<img src="/images/link_photo_accommodations.png" width="81" height="81" /></li>
<li>Meetings & Sports<img src="/images/link_photo_sports.png" width="81" height="81" /></li>
and this is the css:
.btnHome {
position: absolute;
top: 30px !important;
left: 0px;
width: 200px;
height: 115px;
background-image: url(../images/spacer.gif);
}
.header {
position: relative;
top: 0px;
width: 986px;
height: 148px;
background-repeat: no-repeat;
background-position: 0px 95px;
}
.header ul {
font-family: 'PT Sans Narrow', arial, serif;
color: #fff;
font-size: 17px;
list-style: none;
margin: 0px;
padding: 0px;
}
.header a {
color: #fff;
}
.header ul a {
position: absolute;
top: 111px;
}
.linkGreen {
left: 242px;
}
.linkBlue {
left: 395px;
}
.linkPurple {
left: 545px;
}
.linkBrown {
left: 695px;
}
.linkYellow {
left: 843px;
}
.header ul a img {
position: absolute;
top: -78px;
left: 14px;
}
.headerLinks {
position: absolute;
top: 0px;
right: 0px;
font-family: 'PT Sans Narrow', arial, serif;
color: #fff;
font-size: 14px;
width: 320px;
height: 28px;
padding: 7px 0px 0px 0px;
}
.headerLinks a {
padding: 0px 4px 0px 4px;
}
.headerLinkConsumer {
position: absolute;
top: 0px;
right: 83px;
width: 86px;
height: 34px;
background-image: url(../images/link_header_consumer_lo.png);
background-repeat: no-repeat;
}
.headerLinkConsumer:hover, .headerLinkConsumer.current {
background-image: url(../images/link_header_consumer.png);
}
.headerLinkIndustry {
position: absolute;
top: 0px;
right: -3px;
width: 86px;
height: 34px;
background-image: url(../images/link_header_industry_lo.png);
background-repeat: no-repeat;
}
.headerLinkIndustry:hover, .headerLinkIndustry.current {
background-image: url(../images/link_header_industry.png);
}
.headerShadow {
position: absolute;
right: 0px;
top: 95px;
}
.headerLogo {
position: absolute;
left: 0px;
top: 27px;
}
.headerLogoSide {
position: absolute;
left: -24px;
top: 43px;
}
ul.headerNav ul {display: none;}
ul.headerNav li:hover > ul {
display: block;}
ul.headerNav li a:hover > ul li {
display: block;}
ul.headerNav li:hover > ul.sub-events {
margin: 148px 0 0 375px;}
.headerNav .sub-menu {
position:absolute;
z-index:12000;
display:none;
background:#999999 !important;
padding:5px 15px;
-webkit-box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
-webkit-border-radius:0px 0px 3px 3px;
-moz-border-radius:0px 0px 3px 3px;
border-radius:0px 0px 3px 3px;
border-top:3px solid #555555;
}
.headerNav .sub-menu li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
border-bottom: 1px solid #a5a5a5;
border-left: none !important;
}
.headerNav .sub-menu li a{
height: auto !important;
line-height: 1 !important;
padding:10px 0 !important;
}
html body .headerNav .sub-menu li a,
html body .headerNav .sub-menu li .sub-menu li a,
html body .headerNav .sub-menu li .sub-menu li .sub-menu li a {
border: none !important;
display: block !important;
width: 160px;
margin: 0 !important;
padding: 8px 0px !important;
color: #dedede;
line-height: normal;
font-weight: normal !important;
height: auto;
background: none !important;
position:inherit;
}
.headerNav .sub-menu li a:hover,
.headerNav .sub-menu li .sub-menu li a:hover,
.headerNav .sub-menu li.current-menu-item a,
.headerNav .sub-menu li.current-menu-item a:hover,
.headerNav .sub-menu li.current_page_item a,
.headerNav .sub-menu li.current_page_item a:hover {
color: #ffffff !important;
font-weight: normal;
}
.headerNav .sub-menu li:last-child{
border: none;
}
.headerNav .sub-menu li ul {
top: -1px !important;
left: 178px !important;
border-top: none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
You have some pretty weird stuff going on inside your CSS. The actual menu bar is sitting up above the web page and the text from them is hanging down using absolute positioning and offsets. I'm not going to bang on about how you should redo a lot of this CSS because you probably know that and you came here for a solution. Here's what I managed:
It's not perfect but it's a tough piece to work with:
Change this selector like so:
.header ul a {
position: absolute;
top: 111px;
padding-bottom:20px; /* <-- this is the new bit */
}
This will mean your link text will hold its 'hover' status until the cursor crosses over onto the menu, kinda using the padding as a "bridge".
Again, this is a quick and dirty fix and I strongly suggest a larger-scale re-work but if you have deadlines, such is life.
I added an Iframe to a page and it pushed my sidebar down. I tried different ways to float it, but I'm still stuck. Any help would be appreciated. Here's the HTML and CSS for the page:
http://lkwalker.com/writing.html
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>LK Walker</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><a href="index.html">Lauren K. Walker
<p><span class="logo_colour"> | Teacher | </span> <span class="logo_colour">Writer | </span></span> <span class="logo_colour">Yogi | </span></a></h1></p>
</div>
</div>
<nav>
<ul class="sf-menu" id="nav">
<li>About</li>
<li>Schedule
<ul>
<li>Retreats</li>
<li>Privates</li>
</ul>
<li>Energy Medicine Yoga</li>
<li>Military</li>
<li>Writing
<ul>
<li>Social Media</li>
<li>Theatre</li>
</ul>
<li>Contact</li>
</nav>
</header>
<div id="site_content">
<div id="top_border"></div>
<ul id="images">
<li><img src="images/lkwalker.jpg" width="600" height="300" alt="LK Walker" /></li>
<li><img src="images/navasana.jpg" width="600" height="300" alt="Navasana" /></li>
<li><img src="images/donna.jpg" width="600" height="300" alt="Donna Eden" /></li>
<li><img src="images/tree.jpg" width="600" height="300" alt="Tree" /></li>
<li><img src="images/raven.jpg" width="600" height="300" alt="Birding" /></li>
<li><img src="images/yogacow.jpg" width="600" height="300" alt="Cow Pose" /></li>
</ul>
<div class="content">
<h1>Articles</h1>
<iframe width="500" height="400" align="left" src ="http://lkwalkerwriting.blogspot.com/" width="500" height="500">
<p>Your browser does not support iframes.</p>
</iframe><br />
<ul>
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
<div id="sidebar_container">
<img class="paperclip" src="images/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h4><p>Check out our newest clothing partner, MahaDevi, use code EMYoga to get a 15% discount.</p>
<p><em>Like us on FaceBook - Follow us on Twitter</em><!-- START SOCIAL MEDIA WIDGET --><ul id="socialbar"><li id="facebook"><a target="_blank" href="htp://www.facebook.com/EnergyMedicineYoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"></a></li><li id="twitter"><a target="_blank" href="http://twitter.com/energymedyoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"></a></li></ul><style>#socialbar img {border:0px;}#socialbar li img {width:48px; height:48px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{width:180px;text-align:center;}</style><!-- END SOCIAL MEDIA WIDGET --></p>
</div>
</div>
</div>
<footer>
<p>Copyright © Energy Medicine Yoga| Whitefish, MT | Contact Us |</p>
</footer>
</div>
<p> </p>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: Jacques Francois, times, serif;
src: url('../fonts/Jacques Francois.otf');
src: local("Jacques Francois"), url('../fonts/Jacques Francois.otf');
}
#font-face {
font-family: lilly, arial, sans-serif;
src: url('../fonts/lilly.ttf');
src: local("lilly"), url('../fonts/lilly.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em 'lilly', sans-serif;
background: #cab0cb;
color: #444;
height: 100%;
width: 1000px;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Jacques Francois', serif;
letter-spacing: 0em;
padding: 0 0 5px 0;
text-align: center;
}
h1, h2, h3 {
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #04662e;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #615044;
padding: 0 0 5px 0;
font-family: normal 160% 'Jacques Francois', serif;
font: bold 145% times, serif;
}
h5, h6 {
color: #615044;
font: italic 95% times, serif;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #B30303;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
clear: both;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, nav, #container, #logo, #site_content, footer
{
margin-left: auto;
margin-right: auto;
}
#main {
margin: 5px auto;
width: 940px;
background: transparent;
padding-bottom: 30px;
}
header {
background: transparent;
height: 130px;
}
#logo {
width: 940px;
height: 140px;
background: transparent;
color: #888;
padding: 0;
float: left;
border-bottom: 1px solid #AFABAB;}
#logo h1, #logo h2 {
font-family: normal 320% 'Jacques Francois', times, serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 0;
color: #331d59;
text-decoration: none;
font-size: 48px;
}
#logo_text h1 a .logo_colour {
color: #2c89b3;
}
#logo_text a:hover .logo_colour {
color: #2c89b3;
}
#logo_text h2 {
font-size: 140%;
padding: 0 0 0 0;
color: #04662e;
}
nav {
height: 44px;
float: right;
text-align: center;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 10px 10px;
color: #222;
border-top: 2px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
width: 100%;
}
iframe
{
width: 60%;
clear: both;
}
#site_content {
width: 940px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #AFABAB;
}
#top_border {
border-top: 1px solid #fff;
padding-top: 20px;}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 30%;
margin: 0 0 0 0;
}
.sidebar {
float: right;
vertical-align: top;
width: 180px;
margin: 0 0 17px 0;
background: #EFF8FB;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
padding: 0 15px 5px 13px;
}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 230% 'Days', arial, sans-serif;
font-style: bold;
text-shadow: #FFF 1px 1px;
margin: 0 1px;
color: #444;
}
.sidebar h3 {
color: #444;
font: 250% 'Lilly', arial, sans-serif;
padding: 0 15px 5px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #555;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.paperclip {
position: relative;
z-index: 0;
vertical-align: middle;
margin: -15px 0 -60px -40px;
}
.content {
text-align: left;
width: 670px;
margin: 25px 0 0 0;
float: left;
font-size: 120%;
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
width: 940px;
clear: both;
font: 170% 'Lilly', arial, sans-serif;
height: 30px;
padding: 20px 0 20px 0;
float: left;
text-align: center;
border-top: 10px solid #eeeeee;
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
color: #000;
}
footer a {
color: #000;
text-decoration: 1px 1px #FFF;
}
footer a:hover {
color: #000;
text-shadow: none;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #D5D5D5;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 140% 'Days', arial, sans-serif;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #ddd;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
color: #222;
text-shadow: 1px 1px #FFF;
}
.form_settings textarea, .form_settings select {
font: 100% arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #444;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 200px;
}
html body ul.sf-menu ul ul {
margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
width:70%;
top: auto;
}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #ddd;
margin-top: 5px;
padding-bottom: 15px;
}
ul#nav li a {
padding: 7px 18px 6px 18px;
font: 150% 'Lilly', arial, sans-serif;
text-decoration: none;
color: #000;
margin-right: 2px;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
color: #000;
text-shadow: 1px 1px #fff;
}
ul#nav ul li a {
color: #000;
}
ul#nav ul li a:hover {
color: #B30303;
margin-right: 2px;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 200px;
margin: 0 0 0 0;
position: relative;
bottom: 536px;
left: 269px;
}
Add these lines to your sidebar_container id and try!!
Also you had added an iframe and this side_bar class in a single main div, and haven't specified their positions.
The issue is because of </div> closing.
Cut and paste the entire sidebar container after closing of </div>
Now
<div id="content">
bla bla bla
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
</div> <!-- closing content -->
Change it to
<div id="content">
bla bla bla
</div> <!-- closing content -->
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
Your issue not with iframe it is causing because of UL
Its taking its space you left content in div like
<div class="left_container">
<!-left content-->
<iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
</iframe><br>
<ul style="
/* width: 108px; */
/* float: left; */
clear: both;
">
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
</div>
<div class="sidebar_container">
<!--sidebar content-->
</div>
CSS:
.left_container
{
width: 69%;
float: left;
}
remain css is same as yours thanks.
This is a messy fix but should resolve the issue for the moment. If you make these changes in your css it should all line up. I used Firebug on firefox to test it and it worked just fine.
.content {
float: left;
font-size: 120%;
margin: 25px 0 0;
text-align: left;
width: 940px;
}
.content ul {
float: left;
margin: 2px 0 22px;
}
sidebar {
background: none repeat scroll 0 0 #EFF8FB;
border-radius: 7px;
display: inline;
float: right;
margin: -450px 0 17px;
padding: 0 15px 5px 13px;
vertical-align: top;
width: 180px;
}
I would not suggest this is a permanent solution but it should help in the meantime
Current my mouse pointer if there is point out of the red colour box it still doing the hover function, but what i need is i only need the hover in red colour box, it out of the box it will hide the menu.
This is the my source from JSfiddle http://jsfiddle.net/KECN7/
This is my html source code
<ul id="menu">
<li>
<ul>
<li>Logout</li>
<li>Account Settings</li>
<li>Terms & Policies</li>
</ul>
</li>
</ul>
this is css source code
#menu{
/*width: 50%;*/
margin: 0;
padding: 10px 0 0 0;
list-style: none;
position: absolute;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
z-index: 99;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 10px 0 25px 0;
/*width: 50px;*/
padding: 0;
display: none;
position: absolute;
top: 20px;
right: 10px;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 15px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 100px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a.btn-function {
background-image: url(../ovolo/img/btn_function.png);
background-color: red;
background-size: 27px;
background-repeat: no-repeat;
display: block;
position: relative;
margin: 0px 5px 0 90px;
float: left;
}
The problem is you are applying the red box to the a element, but taking action on the (larger) li parent element.
You can change your selector to (Fiddle):
#menu li a:hover + ul, #menu li a + ul:hover{
display: block;
z-index: 99;
}
This is not a perfect fix because of the dead space between the a and the ul though, the best option would be to make the a take up the entire space of the li.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Despite of many efforts, I am unable to make the drop down menu of the same width as of the parent. Please help me out. Fiddle here
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 958px;
/*margin: 60px auto;*/
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 11px 40px;
color: #999;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1000000;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
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*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #000000;
}
#menu ul li:first-child > a {
/*border-radius: 3px 3px 0 0;*/
padding: 11px 13px;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #000;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #000;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
/*border-radius: 0 0 3px 3px*/;
padding: 11px 20px;
}
HTML:
<ul id="menu">
<li>About </li>
<li>Programmes
<ul>
<li>Undergraduate</li>
<li>Postgraduate</li>
</ul>
</li>
<li>Academics</li>
<li>Research</li>
<li>Facilities</li>
<li></li>
</ul>
In the dropdown menu ul element add "right: 0" (or -1px in your case to take into account the borders):
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
right: -1px /* <-- add this */
z-index: 1000000;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
transition: all .2s ease-in-out;
}
Then remove the width property in the a element:
#menu ul a {
padding: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
This will work independently of the menu container width.
working fiddle http://jsfiddle.net/chopsticks/XLxJk/4/
#menu ul a {
padding: 10px;
width: 150px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul li:first-child > a {
padding: 11px 20px;
}
DEMO
So by positioning your dropdown menu absolutely you are removing it from the flow. This causes it to no longer size to the width of it's parent element. You'll need to explicitly set the width, set the width explicitly via js (if you want the menu items to size based on the text they contain) or figure out how to position it differently so it inherits the width.
How about this ?
Just set the width to 100% in the #menu ul, and you have a dropdown of the same size.
http://jsfiddle.net/XLxJk/3/
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I am a css newbie. I have created a menu in which there is a small space appearing between the menu and the drop down menu which caused the hover effect to break. Please help me out. Thanks
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 958px;
/*margin: 60px auto;*/
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
/* border-right: 1px solid #222;*/
box-shadow: 1px 0 0 #444;
position: relative;
box-sizing: border-box;
width: 20%;
}
#menu a {
float: left;
padding: 11px 64px;
color: #999;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1000000;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
transition: all .2s ease-in-out;
width: 100%;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
width:100%;
_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*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #111;
}
#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;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #000;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
/*border-radius: 0 0 3px 3px*/;
}
Here is the html,
<ul id="menu">
<li>About </li>
<li>Programmes<ul>
<li>Undergraduate</li>
<li>Postgraduate</li>
</ul></li>
<li>Academics</li>
<li>Research</li>
<li>Facilities</li>
</ul>
Add:
ul#menu {margin-top:-5px !important;}
The !important tag takes presence over your other margin settings for #menu ul. Adjust as needed to drop down directly below the parent menu item.
Also, if using Chrome right click any element and 'Inspect Element'. Styling will render live for you and allow you to make changes without editing, saving, uploading CSS files to see effects.
On Firefox, download Firebug for the same tools.