I have created a horizontal menu that has a horizontal submenu on one of the links. The people I am doing the site for now want the submenu to go vertically. I can not work out what CSS code I need to change in order to make the sub menu drop downwards from the parent link. The code is below for your perusal.
The website is island-timber.com on the products parent link.
Thanks in advance for any help.
Here's the amended CSS for the nav:
#top_nav {
width: 1050px;
height: 66px;
margin-left: 106px;
z-index: 10;
}
#top_nav ul {
list-style: none;
padding: 0px;
margin-left: auto;
margin-right: auto;
width: 780px;
position: relative;
display: inline-table;
}
#top_nav li {
float: left;
}
#top_nav li a {
font: 20px Stencil;
color: #FF0;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 154px;
height: 61px;
line-height: 54px;
}
#top_nav li a:hover, #top_nav li .active {
background: url(../images/active.png) center;
}
#top_nav li ul {
display: none;
position: absolute;
top: 100%;
width: 154px;
}
#top_nav li:hover > ul {
display: block; /*block*/
}
#top_nav li ul li {
float: none;
position: relative;
}
#top_nav li ul a {
font: 12px Verdana, Geneva, sans-serif;
padding-top: 12px;
height: 30px;
background-color: #FFF;
color: #000;
}
And the amended CSS for the #prew_img tag:
#prew_img {
height: 297px;
z-index: 5;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Island Timber & Building Supplies | Home</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="stylesheets/itbm_styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="top_nav">
<ul>
<li>Home</li>
<li>Products
<ul>
<li>Paintshop</li>
<li>Timber</li>
<li>Building Materials & Insulation</li>
<li>Adhesives & Fixings</li>
<li>Tools & Clothing</li>
</ul>
</li>
<li>Services</li>
<li>Offers</li>
<li>Contact Us</li>
</ul>
</div>
<div id="top_padding"> </div>
<div id="prew_img">
<ul class="round">
<li><img src="images/paintshop_scroll_border.jpg" alt="Island Timber Johnstones paint shop" /></li>
<li><img src="images/timberyard_scroll_border.jpg" alt="Island Timber Yard" /></li>
<li><img src="images/shop_scroll_border.jpg" alt="Island Timber shop" /></li>
<li><img src="images/wagon_scroll_border.jpg" alt="Island Timber delivery wagon" /></li>
<li><img src="images/tools_scroll_border.jpg" alt="Island Timber tools section" /></li>
<li><img src="images/adhesives_scroll_border.jpg" alt="Island Timber adhesives section" /></li>
</ul>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.roundabout.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.round').roundabout();
});
</script>
<div id="middle_padding"></div>
<div id="content_container">
<div id="main_content">
<div id="overview">
<h3>HOME</h3>
<p>Established in 1998, Island & Timber Building Materials Ltd, based in Ballasalla, Isle of Man, have been fulfilling the needs of both the professional trade and the keen DIYer ever since. Our site carries a broad range of products which are in stock and available immediately for collection or delivery.</p><br />
<p>We are members of the National Merchant Buying Society and have access to a wide range of suppliers so we can ensure we are providing excellent quality products at the best prices possible.</p><br />
<p>We run a reliable delivery service and orders placed before 1:00pm are delivered next day. We offer cash on delivery and telephone payments for our non account customers and our fleet of specialist vehicles can cater for all delivery requirements.</p><br />
<p>In our sawmill we have experienced staff to cut timber and sheet materials to your specifications.</p><br />
<p>We pride ourselves on our excellent customer service, from enquiry through to delivery and our knowledgable team are always on hand to help and advise you, our valued customers.</p><br />
<p>Please enjoy browsing our website, here you will see a fraction of the types of products we hold in stock, if you don't see what you are looking for please ask a member of the team, via our Contact page or call us on 01624 827 338, and we will endeavour to source the product at the best price possible for you.</p>
</div>
</div>
<div id="right_col">
<div id="suppliers">
<h3>Some of our suppliers</h3>
<div class="supplier_pic_line">
<img src="images/everbuild_logo.jpg" alt="Ever Build logo" />
<img src="images/faithfull_logo.jpg" alt="Faithfull Tools logo" />
</div>
<div class="supplier_pic_line">
<img src="images/knauf_insulation_logo.jpg" alt="Knauf Insulation logo" />
<img src="images/marshalltown_logo.jpg" alt="Marshalltown logo" />
</div>
<div class="supplier_pic_line">
<img src="images/johnstones_logo.jpg" alt="Johnstones Paints logo" />
<img src="images/olympic_fixings_logo.jpg" alt="Olympic Fixings logo" />
</div>
<div class="supplier_pic_line">
<img src="images/stanley_logo.jpg" alt="Stanley Tools logo" />
<img src="images/irwin_logo.jpg" alt="Irwin Tools logo" />
</div>
</div>
<div id="opening_times">
<h3>Opening Times</h3>
<p class="opening_times">Mon - Thurs - 7:30am to 5:00pm</p>
<p class="opening_times">Friday - 7:30am to 4:30pm</p>
<p class="opening_times">Saturday - 7:30am to 12:00pm</p>
<p class="opening_times">Sunday - Closed</p>
<br />
<p class="opening_times">Tel: (01624) 827338</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
change this:
#top_nav li ul {
position: absolute; top: 100%;;
}
into this:
#top_nav li ul {
position: absolute; top: 100%; width:200px;
}
that should fix your problem
cheers, marco
Edit
#top_nav {
width: 1050px;
height: 66px;
margin-left: 106px;
}
#top_nav ul {
padding-left: 0px;
list-style: none;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 780px;
position: relative;
display: inline-table;
z-index: 1010;
}
#top_nav ul li {
float: left;
}
#top_nav ul li a {
font: 20px Stencil;
color: #FF0;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 154px;
height: 61px;
line-height: 54px;
}
#top_nav ul li a:hover, #top_nav li .active {
background: url(../images/active.png) center;
}
#top_nav ul li ul {
display: none;
position: absolute; top: 100%; width: 200px;
}
#top_nav ul li:hover > ul {
display: block; /*block*/
}
#top_nav ul li ul li {
float: none;
position: relative;
background-color:red !important;
}
#top_nav ul li ul li a:active{
background: url(images/active.png) center;
}
#top_nav ul li ul li a:hover{
background-color:red;
}
#top_nav ul li ul a {
font: 12px Verdana, Geneva, sans-serif;
padding-top: 12px;
height: 30px;
background-color: #FFF;
color: #000;
}
Related
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 7 years ago.
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><img src="images/logo.png" height="157px" width="237px"></div>
<!--
<div class="social">
<ul>
<li><img src="images/icons/facebook.gif"/></li>
<li><img src="images/icons/twitter.gif"/></li>
<li><img src="images/icons/youtube.gif"/></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a F.A.Q page.</p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
View
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
View
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
by default <UL/> contains default padding
therefore try adding style to padding:0px in css class or inline css
I have a pure CSS dropdown on our website. It works fine in Chrome, but in IE9, the child elements are to the right of the parent rather than below the parent.
CSS code:
/* drop down menus on front page */
ul#dropdown {
font-size: 14pt;
margin: 0;
padding: 0;
padding-top: 10px;
color: #92008f;
width: 100%;
font-family: Times New Roman, Georgia, Times;
z-index: 1;
}
ul#dropdown li, ul#dropdown li ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
overflow: visible;
width: 140px;
text-align: center;
z-index: 1;
}
li ul {
display: none;
list-style: none;
position: absolute;
font-size: 11pt;
width: 140px;
font-family: Times New Roman, Georgia, Times;
color: #000000;
overflow: auto;
background-color: #efdaef;
border: 1px solid #92008f;
margin: 0;
padding: 0;
z-index: 1;
}
li:hover ul {display: block;}
HTML:
<!DOCTYPE html>
<?php
$author='STARK HOUSE';
include 'header.php'; ?>
<div id="wrapper">
<ul id="dropdown">
<!-- STARK HOUSE -->
<ul>
<li><img src="images/downarrow.jpg" style="margin:0"> STARK HOUSE
<ul>
<li>Crime Book Club
<li>Newsletter
</ul>
</ul>
<!-- FANTASY -->
<ul>
<li><img src="images/downarrow.jpg" style="margin:0">FANTASY
<ul>
<li>Algernon Blackwood
<li>Catherine Butzen
<li>Storm Constantine
</ul>
</ul>
website: http://starkhousepress.com
thank you!
I believe that your problem is with IE7, I tested with IE9 and works fine:
try the code bellow (I tested on IE 7 8 9 and other.. works fine)
HTML:
<div id="wrapper">
<div id="dropdown">
<!-- STARK HOUSE -->
<div class="drop">
<div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0"> STARK HOUSE </div>
<ul>
<li>Crime Book Club</li>
<li>Newsletter</li>
</ul>
</div>
<!-- FANTASY -->
<div class="drop">
<div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0">FANTASY</div>
<ul>
<li>Algernon Blackwood</li>
<li>Catherine Butzen</li>
<li>Storm Constantine</li>
</ul>
</div>
</div>
</div>
CSS:
#dropdown {
font-size: 14pt;
margin: 0;
padding: 0;
padding-top: 10px;
color: #92008f;
width: 100%;
font-family: Times New Roman, Georgia, Times;
z-index: 1;
}
.drop {
display:inline-block;
width:140px;
vertical-align:top;
*display:inline;
}
.drop ul{
display:none;
}
.drop:hover ul {
display: block;
}
http://jsfiddle.net/vRRw8/8/
I hope to help you