1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Help Css Drop Down Menu

Discussion in 'HTML & Website Design' started by websitemendes, Jan 30, 2013.

0
  1. #1
    Hi. I'm a amateur webdesigner, and i need help here..
    I already searched on youtube/google... and can't do it good with my template(free template downloaded in internet) :(, only with new template. I'm noob, I know. Please help me

    I need a drop down menu on "Conditions A-Z" for example.

    HTML code
    "(...)
    <body>
    <div id="templatemo_container">
    <!-- Free CSS Templates by TemplateMo.com -->
    <div id="templatemo_header">
    </div>
    <div id="templatemo_content">

    <div id="templatemo_content_left">
    <div id="templatemo_menu">
    <ul>
    <li><a href="#" class="current">Homepage</a></li>
    <li><a href="index_copy(1).html">Conditions A-Z</a></li>
    <li><a href="#">Acupunture</a></li>
    <li><a href="meridians.html">Meridians</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    </div>
    (...)"


    CSS code
    "

    html {
    background: #444;
    }

    body {

    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    background: #444;
    font-size: 12px;
    line-height: 1.5em;
    width: 100%;
    display: table;

    }

    a:visited { color: #AFA; text-decoration: none; }

    a:link { color: #AFA; text-decoration: none; }

    a:hover { color: #FF0; text-decoration: underline; }

    a:active { color: #FF0; text-decoration: underline; }

    #templatemo_container {

    width: 940px;
    margin: auto;
    background: #313131;

    }

    #templatemo_header {

    width: 940px;
    height: 244px;
    background: url(images/templatemo_header12.jpg) no-repeat;
    margin: 0;
    padding: 0;

    }

    #templatemo_content {

    margin: 0;
    padding: 0;

    }
    /* Left Content */
    #templatemo_content_left {

    float:left;
    width: 233px;
    min-height: 618px;
    background: url(images/templatemo_left_bg.jpg);
    margin: 0;
    padding: 0;

    }

    #templatemo_menu {

    float: right;
    width: 180px;
    height: 200px;
    margin: 0;
    padding: 10px 0 0 0;
    }

    #templatemo_menu ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #templatemo_menu li a {

    display: block;
    width: 134px;
    height: 27px;
    color: #fff;
    background: url(images/templatemo_menu.jpg) no-repeat;
    font-family: Tahoma;
    font-size: 18px;
    margin: 0 0 10px 0;
    padding: 5px 0 0 45px;

    }

    #templatemo_menu li .current {

    background: url(images/templatemo_menu_current.jpg) no-repeat;
    color: #8fd300;
    text-decoration: none;

    }

    #templatemo_menu li a:hover {

    background: url(images/templatemo_menu_current.jpg) no-repeat;
    color: #8fd300;
    text-decoration: none;

    }
    /* End Of Left */

    /* Right Content */
    #templatemo_content_right {

    float: right;
    width: 707px;
    margin: 0;
    padding: 0;

    }

    #templatemo_content_right_bottom {

    float: right;
    width: 707px;
    background: #4c4c4c url(images/templatemo_right_bottom.jpg) right bottom no-repeat;
    margin: 0;
    padding: 0;

    }

    #templatemo_content_right_top {

    width: 682px;
    background: url(images/templatemo_right_top.jpg) top no-repeat;
    margin: 0;
    padding: 33px 0px 0px 25px;

    }

    #templatemo_content_right_top .templatemo_post_area {

    width: 375px;
    margin: 0;
    padding: 15px 0 0 0;

    }

    #templatemo_content_meridian {

    width: 682px;
    background: url(images/templatemo_right_top.jpg) top no-repeat;
    margin: 0;
    padding: 33px 0px 0px 25px;

    }

    #templatemo_content_meridian .meridian {

    width: 320px;
    margin: 0;
    padding: 15px 0 0 0;

    }


    .templatemo_post_area h1 {

    font-family: Tahoma;
    font-size: 18px;
    color: #AFA;
    margin: 0 0 10px 0;
    padding: 0;

    }

    .templatemo_post_area p {

    font-family: Tahoma;
    font-size: 12px;
    text-align: justify;
    color: #FFF;
    margin: 0 0 10px 0;
    padding: 0;

    }
    .templatemo_post_area h2 {

    font-family: Tahoma;
    font-size: 12px;
    color: #AFA;
    margin: 0 0 10px 0;
    padding: 0;

    }

    * html #templatemo_content_right_bottom_section {

    margin-top: -20px;
    }

    #templatemo_content_right_bottom_section {

    width: 687px;
    background: #161616;
    margin: 0;
    padding: 10px;

    }

    #templatemo_content_right_bottom_section .templatemo_text_area {


    margin: 0;
    padding: 20px 0px 20px 20px;

    }

    .templatemo_text_area h1 {

    font-family: Tahoma;
    font-size: 18px;
    color: #4c4c4c;
    margin: 0 0 10px 0;
    padding: 0;

    }

    .templatemo_text_area p {

    font-family: Tahoma;
    font-size: 12px;
    text-align: justify;
    color: #8b8b8b;
    margin: 0 0 10px 0;
    padding: 0;

    }

    .templatemo_text_area img {

    margin: 0 20px 10px 0;
    padding: 0;
    border: 1px solid #8fd300;

    }

    * html .templatemo_bottom_panel_section {

    margin-top: -35px;
    }

    .templatemo_bottom_panel_section {

    background: url(images/header-acupuncture2.jpg) no-repeat;
    width: 920px;
    height: 109px;
    margin: 0;
    padding: 10px;

    }

    .templatemo_bottom_section_left {

    float: left;
    width: 300px;
    margin: 0;
    padding: 10px;

    }

    .templatemo_bottom_section_left h1 {

    font-family: Verdana;
    font-size: 12px;
    color: #ffd200;
    margin: 0 0 5px 0;
    padding: 0;

    }

    .templatemo_bottom_section_left ul {
    list-style: circle;
    color: #fff;
    margin: 0 0 0 15px;
    padding: 0;
    }

    .templatemo_bottom_section_left li a {
    font-family: Verdana;
    font-size: 12px;
    text-decoration: underline;
    color: #fff;
    margin: 0 0 10px 0;
    padding: 0;

    }

    .templatemo_bottom_section_left li a:hover {

    text-decoration: none;

    }

    .templatemo_bottom_section_right {

    float: right;
    width: 300px;
    margin: 0;
    padding: 10px;
    text-align: right;
    }

    .templatemo_bottom_section_right h1 {

    font-family: Verdana;
    font-size: 12px;
    color: #ffd200;
    margin: 0 5px 5px 0;
    padding: 0;

    }

    .templatemo_bottom_section_right p {

    font-family: Verdana;
    font-size: 12px;
    color: #fff;
    text-align: right;
    margin: 0 0 10px 0;
    padding: 0;
    }

    .templatemo_bottom_section_right img {
    border: none;
    }
    /* End Of Right Content */

    * html #templatemo_footer {

    margin-top: -26px;
    }

    #templatemo_footer {
    background: #000000;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    color: #FFFFFF;
    }

    #templatemo_footer a {

    color: #fff;
    text-decoration: underline;

    }

    #templatemo_footer a:hover {

    color: #ff0;
    text-decoration: none;

    }

    .cleaner {

    clear: both;
    height: 0px;

    }"



    Thank You for your help...
    (Sorry my bad english)
     
    websitemendes, Jan 30, 2013 IP
  2. xtmx

    xtmx Active Member

    Messages:
    359
    Likes Received:
    12
    Best Answers:
    4
    Trophy Points:
    88
    #2
    http://thomasmottl.com/extra/dropdown.htm

    I made this for you. I've tested it in IE8, Firefox, and Chrome.
     
    xtmx, Jan 30, 2013 IP
    Colleen likes this.
  3. websitemendes

    websitemendes Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Last edited: Jan 31, 2013
    websitemendes, Jan 31, 2013 IP
  4. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #4
    Also, put the code in tags next time. Just so we can browse it easier.

    
Like this.
{code}
Content goes here. Replace the squiggly brackets with square brackets ([) for it to work.
{/code}
    Code (markup):
     
    jamjar919, Feb 2, 2013 IP
  5. anurag355

    anurag355 Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    http://www.htmldrive.net/items/demo/1220/Pure-useful-CSS3-Dropdown-Menu
    http://www.htmldrive.net/items/demo/999/Beautiful-Drop-Down-Menu-with-jquery
     
    anurag355, Feb 4, 2013 IP
  6. Moer Ahmad

    Moer Ahmad Greenhorn

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    Sorry for 'hijacking' this thread but I've also have issues with the css drop down menu. Apparently if i put photo it looks fine with no overlapping issue. However if i change the photo to slider (css or js) the photo will overlap the drop down menu instead.

    Any ways to solve this, coz i really want to use the slider.
     

    Attached Files:

    Moer Ahmad, Feb 21, 2013 IP