Advertisement

05.06.2008 at 10:14AM PDT, ID: 23380184 | Points: 500
[x]
Attachment Details

help adding horizontal drop down menu to css website

Asked by ipcipher in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <title>BlueBlog</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="en-us" />
      <meta http-equiv="imagetoolbar" content="no" />
      <meta name="MSSmartTagsPreventParsing" content="true" />
      <meta name="description" content="SunRise Free Css Template" />
      <meta name="keywords" content="" />
      <meta name="author" content="David Herreman (http://www.free-css-templates.com)" />
      <style type="text/css" media="all">@import "images/style.css";</style>
      <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
</head>

<body>
      <div class="content">
            <div id="top">
                  <div class="padding">
                        <a href="#">About me</a> | <a href="#">contact</a>
                  </div>
            </div>
            <div id="header">
                  <div class="f_search">
                              <form method="post" action="?">
                                    <p><input type="text" name="search" value="search..." class="search" onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> <input type="submit" value="Go" class="submit" /></p>
                              </form>
                  </div>
                  <div class="title">
                        <h1>Free BlueBlog Template</h1>
                        <h2>Only gradients and light brush in this header!</h2>
                  </div>
            </div>
      
            <div id="subheader">
                  <div id="menu">
                          <ul>
                              <li><a href="http://www.free-css-templates.com">Home</a></li>
                              <li><a href="http://www.free-css-templates.com">Products</a></li>
                              <li><a href="http://www.free-css-templates.com">Archive</a></li>
                              <li><a href="http://www.free-css-templates.com">Affiliates</a></li>
                              <li><a href="#">About</a></li>
                              <li><a href="#">Contact</a></li>
                        </ul>
                  </div>
                  
                  
            </div>
            
            <div id="main">
                  <div class="right_side">
                        
                        <div class="nav">
                        <h2>About me</h2>
                        <div class="padding">
                        <div class="img2"><img src="images/img2.jpg" alt="" /></div>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, turpis at tincidunt porttitor, est elit consequat metus.</div>
                        <h2>Past Articles</h2>
                              <ul>
                                    <li><a href="http://www.solucija.com/home/new-template-internet-music/">New template: Internet Music</a></li>
                                    <li><a href="http://www.cssheaven.com/">CSS Heaven Gallery</a></li>
                                    <li><a href="http://www.solucija.com/home/css-toplist/">CSS Toplist</a></li>
                                    <li><a href="http://www.iollo.com/home/open_source_web_designs_and_webmaster_forum/">Open Source Web Designs and Webmaster Forum</a></li>
                                    <li><a href="http://www.iollo.com/home/welcome_to_iollos_all_stuff_reviews/">Welcome to iollo's review highway</a></li>
                                    
                              </ul>
                        
                              
                              <br />
                              <h2>Partners</h2>
                              <ul>
                                    <li> <a href="http://www.solucija.com">solucija.com</a></li>
                                    <li> <a href="http://www.free-css-templates.com">free-css-templates.com</a></li>
                                    <li> <a href="http://snews.vietbee.net/">snews.vietbee.net</a></li>
                                    <li> <a href="http://p-ahlqvist.com/">p-ahlqvist.com</a></li>
                                    <li> <a href="http://www.brauck.nl/">www.brauck.nl</a></li>
                                    <li> <a href="http://www.design4.ltd.pl/">www.design4.ltd.pl</a></li>
                                    
                              </ul>
                        </div>
                  </div>
                  <div class="left_side">
                        <h2><a href="#">BlueBlog Design</a></h2>
                        <h3>SIMPLE, LIGHT...LIKE THE POWERFUL SNEWS CMS</h3>
                        <div class="img"><img src="images/img.jpg" alt="" /></div>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, turpis at tincidunt porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor. Aenean nec urna non dui lobortis viverra...
                        <p class="date">Posted by David <img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments (3)</a> <img src="images/timeicon.gif" alt="" /> 21.02.</p><br />
                        <h2><a href="#">Free-Css-Templates.com</a></h2>
                        <h3>DOWNLOAD AND USE NEW TEMPLATES FOR FREE!</h3>
                        <div class="img"><img src="images/img.jpg" alt="" /></div>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, turpis at tincidunt porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus <a href="#">faucibus blandit</a> eros. Curabitur porttitor ante non est.
                        <br /><br />Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor. Aenean nec urna non dui lobortis viverra...
                        <p class="date">Posted by Jack <img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments (15)</a> <img src="images/timeicon.gif" alt="" /> 17.01.</p><br />
                  </div>
                  
            </div>
            
            <div id="footer">
                  <div class="padding">
                        |
                        <a href="#">Contact</a> |<a href="#">Login</a>
                  </div>
            </div>
      </div>
</body>
</html>


Style.css

/*

      
      
*/

body {
      margin:0px 0;
      padding:0;
      font: 74% Arial, Sans-Serif;
      color:#ccc;  
      background: #303B41 url(bg.jpg) repeat-x;
      line-height: 1.4em;
}


.content {
      background: #FFF url(mainbg.jpg) repeat-y center;
      color: #ccc;
      margin: 0 auto;
      padding: 0;
      width: 800px;
}

.img {
      padding: 0 8px 8px 0;
      float: left;
}

.img2 {
      padding: 0 0 3px 3px;
      float: right;
}



/* HEADER
---------------------------------------------------------------------------------------------------------------------------------------------------
*/
#top {
      padding: 0;
      margin: 0;
      background: #000 url(top.jpg) no-repeat top;
      height: 44px;
}

#top .padding {
      float: right;
      color: #808080;
      padding: 20px 25px 0 0;
      font-size: 90%;
}

#top a { color: #E0F5FF; }


#header {
      margin: 0;
      width: 800px;
      background: #036EB4 url(header.jpg) no-repeat center top;  
      height: 149px;
      color: #FFF;
}

#header .f_search { float: right; padding: 70px 50px 0 0; }
#header .title {      padding: 45px 0 0 50px; }
#header h1 {
            font-family: Arial, Verdana, Helvetica, sans-serif;
            font-size: 22px; font-weight: bold;
            margin: 0;
            padding: 0;
}

#header h2 {
            font-family: Arial, Verdana, Helvetica, sans-serif;
            font-size: 12px;
            background-image: none;
            color: #075181;
            margin: 0;
            padding: 0 0 0 2px;
}


/* SUBHEADER
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#subheader {
      background: #000 repeat-y center;
      width: 770px;
      height: 35px;
      color: #FFF;
      margin-left: 15px;
      
}
#subheader .padding { padding: 10px 15px 10px 15px; }
#subheader h2 { color: #FEAB06; }
#subheader a {color: #FECF5F; }



/* NAVIGATION
---------------------------------------------------------------------------------------------------------------------------------------------------*/
.nav { text-align: left; color:       #7D8085; padding: 20px 0 0 0px; width: 200px; }
.nav li {
      margin: 5px 0 5px 0px;
      padding: 0px 0 0 0px;
      border-bottom: 1px dotted #ccc;
      
      list-style: none;
}
.nav li a { color: #546078; text-decoration: none;  padding: 5px 0 0 0px; display: block; margin-bottom: 2px;}
.nav li a:hover { color: #075181; text-decoration: none; background: #E5F6FF; display: block; margin-bottom: 2px;}


/* MAIN
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#main { background: #FFF; width: 760px; margin: 0 20px 0 20px; color: #808080; }  
#main .right_side { float: right;
      padding:0px 0 0 10px; margin:0;
      background-color: #FFF;
      width: 210px;
}

#main .right_side .hitems { margin: 0;       padding: 0; }
#main .right_side .hitems ul {
      margin: 5px 0 5px 0;
      padding : 0;
      color: #a90000;
      list-style-image: url(arrow.gif);
}
      
#main .right_side .hitems li {
      margin: 0 0 2px 20px;
      padding: 0 0 0 0px;
      color: #555;
      
}

#main .left_side { float: left; width: 500px; background: #FFF; padding:15px 15px 0 20px; margin:0; }
#main h3 {  font: 85% Arial, Sans-Serif; margin: 0 0 10px 0px; padding: 0; color: #5f5f5f; background: inherit;
                  border-bottom: 1px solid #036CB4;
}

#main .box  {      background: #efefef; padding: 5px; border: 1px solid #ccc;}

#main .right_side ul {
      margin: 5px 0 5px 0;
      padding : 0;
      list-style : none;
      border-bottom: 0px solid #eee;
      list-style-type: square;
      color: #a90000;
}
      
#main .right_side li {
      margin: 0 0 2px 15px;
      padding: 0 0 0 0px;
      color: #555;
}

#main .right_side  .padding {
margin: 0 0 20px 15px;
      padding: 0 0 0 0px;
      color: #555;
}


/* FOOTER
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer {
      clear:both;
      height: 43px;
      color:#ccc;  
      background: #000 url(footer.jpg) top no-repeat;
      font-size:90%;
      padding: 0;
      text-align:center;
}

#footer .padding { padding: 10px 0px 0px 0px; }
#footer .right {
      float:right;
      clear:right;
      text-align:right;
}

#footer a { color: #E0F5FF; }

/*  Top Menu */
#menu {
      background: #000 url(menu.jpg) no-repeat center bottom;
      width: 760px;
      height: 35px;
      margin: 0;
      padding: 0;
}

#menu ul { margin:0; list-style:none; padding: 5px 0 0 20px; }
#menu a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px; text-decoration:none;  }
#menu a { float:none; }
#menu li { float:left; color: #FFF; background: #000; margin:0; padding:0 0 0 0px; }
#menu a:hover { text-decoration:underline;}  
#menu .padding { padding: 5px 0 0 10px; font-weight: bold; }




/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/

input.search { width: 150px; border: 1px solid #075181; color: #666; }
input.submit {
      background: none;
      color: #075181;
      font: bold 1.1em Arial, Verdana, Helvetica, sans-serif;
      border: 0;
}

input.search:hover {      background: #FFFFF4; }

ul { margin-left: 0; padding-left: 5px; list-style : square; }
li {       margin: 0 0 2px 15px; padding: 0 0 0 0px;      color: #555; }
.sub  {margin: 0 0 2px 30px; padding: 0 0 0 0px;  color: #888; }

p { margin: 0 0 5px 0; padding: 0; color: #808080; background: inherit; }
a { color: #075181; background: inherit; text-decoration:none; }
a:hover { background: inherit; text-decoration:underline; }

h1 {
      padding:0;
      margin:0;
      color: #FFF;
      background: inherit;
      font: bold 1.8em Arial, Sans-Serif;
      letter-spacing: -1px;
}

h1 a { color: #FFF; background: inherit; }

h2 {
      background: url(h.gif) no-repeat left;
      color:#075181;
      font-size:140%;
      font-weight:bold;
      margin: 5px 0 5px 0px;
      padding:0 0 0 30px;
}

h2 a { background: #FFF; color: #075181; }
h2 a:hover { background: #FFF; color: #68ADD5; text-decoration:none;  }

fieldset {      border: 1px solid #075181; }
textarea.text {
      height: 150px;
      width: 90%;
      border: 1px solid #A90000;
      background: #FFF;
      color: #354D5F;
}

textarea.text:hover {
      border: 1px solid #A70000;
      background: #FFFFF4;
      color: #000;
}

input.field {
      border: 1px solid #075181;
      background-color: #FFFFFF;
      width: 283px;
      color: #000;
}

input.field:hover {
      border: 1px solid #68ADD5;
      background: #FFFFF4;
      color: #000;
}

input.text {
    border: 1px solid #A70000;
      margin: 0;
      width: 150px;
      background: inherit;
      color: #000;
      padding: 4px;
      
}


input.text:hover {
      border: 0px solid #68ADD5;
}

.date {
      color: #808080;
      background: #FFFFFF;
      text-align: right;
      margin: 4px 0 5px 0;
      padding: 0.4em 0 0 0;
      border-top: 1px solid #eee;
}

.comments {
      padding: 10px 10px 8px 10px;
      margin: 0 0 7px 0;
      background: #f8f8f8;
      color: #000;
}

.commentsbox {
      padding: 8px 0 10px 10px;
      margin: 0 0 10px 0;
      background: #f4f4f4;
      color: #000;
}

.error {
      color: #990000;
      background-color: #FFF0F0;
      padding: 7px;
      margin-top: 5px;
      margin-bottom: 10px;
      border: 1px dashed #990000;
}
.error h2 {
      color: #990000;
      background: inherit;
}

.success {
      color: #000000;
      background: #F5FBE1;
      padding: 7px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: 1px dashed #7BA813;
}
.success h2 {
      color: #7BA813;
      background: inherit;
}Start Free Trial
 
Keywords: help adding horizontal drop down men…
Title
1 Css in firefox.
2 CSS styles not behaving as expected
3 CSS Highlight current page.
4 CSS and Horizontal drop down menus
5 CSS question
6 CSS element styling
 
Loading Advertisement...
 
[+][-]05.06.2008 at 11:14AM PDT, ID: 21509593

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]05.06.2008 at 12:35PM PDT, ID: 21510276

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]05.06.2008 at 05:39PM PDT, ID: 21512243

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628