Drop down menu bar problems

No replies

Sat, 2011-05-21 05:21

jbhunter

Offline

newbie

Last seen: 12 years 1 week ago

Timezone: GMT-5

Joined: 2011-05-21

Posts: 1

Points: 2

I am thinking of using drop down menus from a standard CSS menu bar. I decided to learn on a simple template and after reading some tutorials I am not getting the menu bar to display correctly. I am having two issues, the sub menus are being displayed in the normal bar without a mouse over and when I do mouse over and they drop down vertically they are shifting the rest of the site content which I though they the position:absolute would take care of this issue. Any thoughts.

Here was some of the tutorials I was reading through.
http://www.cssnewbie.com/easy-css-dropdown-menus/
http://www.justsoftwaresolutions.co.uk/articles/css_menus.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
  <title>snow_scene template</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<!--[if gte IE 5]><![if lt IE 7]>
<style type="text/css">
.navmenu li
{
  behavior: url( ie_menus.htc );
}
</style>
<![endif]><![endif]-->
<body>
  <div id="main">
    <div id="links"></div>
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <!-- class="blue", allows you to change the colour of the text - other classes are: "green", "orange", "red", "purple" and "yellow" -->
          <h1>snow_<span class="blue">scene</span></h1>
          <h2>A simple, snow scene, website template</h2>
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="tab_selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="tab_selected"><a href="index.html">Home</a></li>
          <li><a href="our_services.html">Our Services</a><ul>
            <li><a href="#.html">One</a></li>
            <li><a href="#.html">Two</a></li>
            <li><a href="#.html">Three</a></li></ul>
            </li> 
          <li><a href="about_us.html">About Us</a></li>  
          <li><a href="styles.html">Styles</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="site_content">
      <div class="sidebar">
        <!-- insert your sidebar items here -->
        <h1>Latest News</h1>
        <h2>New Website Launched</h2>
        <h3>January 1st, 2010</h3>
        <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
        <h1>Useful Links</h1>
        <ul>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
        </ul>
        <h1>Useful Info</h1>
        <p>You can put anything you like in the sidebar. Latest news, useful links, images, contact information. Anything you think the visitor will find useful.</p>
      </div>
      <div id="content">
        <!-- insert the page content here -->
        <h1>Welcome to the snow_scene template</h1>
        <p>This standards compliant, simple, fixed width website template is released as an 'open source' design (under the <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>), which means that you are free to download and use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design by dcarter' link in the footer of the template, but other than that...</p>
        <p>This template is written entirely in XHTML 1.1 and CSS, and can be validated using the links in the footer.</p>
        <p>You can view my other 'open source' template designs <a href="http://www.dcarter.co.uk/templates.html">here</a>.</p>
        <p>This template is a fully functional 5 page website, with a <a href="styles.html">styles</a> page that gives examples of all the styles available with this design.</p>
        <h1>Browser Compatibility</h1>
        <p>This template has been tested in the following browsers:</p>
        <ul>
          <li>Internet Explorer 8</li>
          <li>Internet Explorer 7</li>
          <li>FireFox 3</li>
          <li>Google Chrome 2</li>
          <li>Safari 4</li>
        </ul>
      </div>
    </div>
    <div id="footer">Copyright &copy; Company Name. All Rights Reserved. | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">design by dcarter</a></div>
  </div>
</body>
</html>

html
{ height: 100%;}
 
*
{ padding: 0;
  margin: 0;}
 
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #E8E4E5;
  color: #555;}
 
p
{ padding: 0 0 16px 0;
  line-height: 1.7em;}
 
h1, h2, h3, h4, h5, h6 
{ color: #362C20;
  padding: 0 0 5px 0;}
 
h1, h4
{ font: normal 165% "century gothic", arial;
  margin: 0 0 15px 0;
  padding: 15px 20px 5px 0;}
 
h2, h5
{ color: #FA9300;
  padding: 0 0 5px 0;
  font: normal 120% arial;}
 
h3, h6
{ color: #888;
  font: italic 95% arial;
  padding: 0 0 15px 0;}
 
h4, h6
{ color: #B60000;}
 
h5
{ color: #362C20;}
 
img
{ border: 0;}
 
a, a:hover
{ outline: none;
  color: #028FD0;
  text-decoration: underline;}
 
a:hover
{ text-decoration: none;}
 
blockquote
{ margin: 20px 0 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #F5F5F1;}
 
ul
{ margin: 2px 0 18px 16px;}
 
ul li
{ list-style-type: square;
  margin: 0 0 6px 0; 
  padding: 0 0 0 8px;}
 
ol
{ margin: 2px 0 0 24px;}
 
ol li
{ margin: 0 0 6px 0;}
 
#main, #header, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}
 
#main
{ width: 945px;
  background: #E2E2DA url(content.png) repeat-y;
  color: #555;} 
 
#header
{ background: #C9D3C8;
  color: #FFF;
  width: 905px;
  border-top: 8px solid #FFF;}
 
#logo
{ width: 905px;
  height: 166px;
  position: relative;
  background: #C9D3C8 url(logo.jpg) no-repeat right bottom;
  color: #FFF;}
 
#logo #logo_text 
{ position: absolute; 
  top: 10px;
  left: 0;}
 
#logo_text h1
{ font: normal 280% "century gothic", arial;
  padding: 29px 0 0 20px;
  margin: 0;
  text-transform: lowercase;
  color: #FFF;
  background: transparent;}
 
#logo_text h2
{ font-size: 110%;
  margin: 0;
  padding: 4px 0 0 20px;
  color: #4F4F4F;
  background: transparent;
  text-transform: none;
  letter-spacing: 0.1em;}
 
#menubar
{ background: #C9D3C8 url(menu.png) repeat-x;
  width: 872px;
  height: 45px;
  padding: 0 17px 0 16px;} 
 
ul#menu
{ float: right; 
  margin: 0;}
 
ul#menu li
{ float: left;
  margin: 7px 0 0 0;
  padding: 0;
  list-style: none;}
 
ul#menu li a
{ letter-spacing: 0.1em;
  font-size: 105%;
  display: block; 
  float: left; 
  height: 25px;
  text-decoration: none; 
  padding: 8px 22px 5px 22px;
  text-align: center;
  background: transparent;
  color: #FFF;} 
 
ul#menu li.tab_selected, ul#menu li.tab_selected a:hover
{ background: url(menu_selected.png) repeat-x;
  color: #FFF;}
 
ul#menu li a:hover
{ background: transparent;
  color: #05B3FB;}
 
/*Added Here*/
 
  ul#menu li ul {
	display: inline;
	width: 10em; /* Width to help Opera out */
	background-color: #69f;
}
 
ul#menu li:hover li {
	float: none; }
 
ul#menu li:hover li a {
	background-color: #69f;
	border-bottom: 1px solid #fff;
	color: #000; }
 
ul#menu li li a:hover {
	background-color: #8db3ff; }
 
ul#menu ul
{
  display: none;
}
ul#menu li:hover > ul
{
  display: block;
}
ul#menu ul.parent_hover
{
  display: block;
 
/*To Here*/
 
#site_content
{ overflow: hidden;} 
 
.sidebar
{ float: right;
  width: 168px;
  padding: 10px 34px 15px 15px;
  margin-right: 10px;}
 
.sidebar ul
{ border-top: 1px solid #EEEEEA;
  width: 178px; 
  padding-top: 4px; 
  margin: 4px 0 20px 0;}
 
.sidebar li
{ list-style: none; 
  padding: 0 0 4px 0; 
  border-bottom: 1px solid #EEEEEA;}
 
.sidebar li a, .sidebar li a:hover
{ text-decoration: none; 
  padding: 0 0 0 22px;
  display: block;
  background: transparent url(arrow.png) no-repeat left center;
  color: #555;
  border: 0;} 
 
.sidebar li a.selected, .sidebar li a:hover, .sidebar li a.selected:hover
{ background: transparent url(arrow_select.png) no-repeat left center;
  border: 0;
  color: #028FD0;} 
 
#content
{ text-align: left;
  width: 640px;
  float: left;
  padding: 10px 10px 40px 35px;}
 
#footer
{ width: 905px;
  height: 40px;
  padding: 22px 0 4px 0;
  text-align: center; 
  background: #595959;
  color: #FFF;
  border-top: 5px solid #85AAAD;}
 
#footer a, #footer a:hover
{ background: transparent;
  color: #FFF;}
 
.yellow
{ color: #F7C015;}
 
.blue
{ color: #05A4D1;}
 
.orange
{ color: #FF7A0F;}
 
.red
{ color: #C80500;}
 
.purple
{ color: #EB0FFF;}
 
.green
{ color: #A4AA04;}
 
.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: 2px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
 
.form_settings .submit
{ font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 206px; 
  height: 26px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #595959; 
  color: #FFF;}
 
.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 299px;}
 
.form_settings select
{ width: 304px;}
 
.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
{ text-align: left;
  background: #595959;
  color: #FFF;
  padding: 7px 4px;}
 
table tr td
{ background: #CCCCCC;
  color: #47433F;
  border-top: 1px solid #FFF;}

Tags:

Beginners CSS Questions

Drop down menu bar problems

User login

Navigation