SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Horizontal drop down menu problems???

    I have been trying to make my horizontal drop down menu appear properly, but haven't had much luck. Please have look at my html and css, and please tell me how I can fix it? I want the drop down menu to appear directly underneath "Product Range", not in a line across the screen. Also I need the buttons to be within the horizontal bar, not appearing half inside and half outside the horizontal bar.

    HTML and CSS

    Thanks in advance.

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The elements all positioning themselves to the right is likely caused by the rule .mainMenu ul li a{ float: left;}
    I'd recommend taking a look at this screencast on nettuts: http://net.tutsplus.com/tutorials/de...vigation-menu/
    It explains how you can do this very easily. you can of course, style it for your needs. I hope this helps!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, you are using a bad way of showing it, and you should be hiding it via a negative left margin, and setting that to 0 upon hover, also you had overflow:hiddens which 99% of hte time hides hte dropdowns, so you need a different containing technique (which I Have added)
    Plus you need coordinates for the dropdown insstead of setting auto

    And the dropdown didn't have position:absolute so it was in the regular flow of the document.

    Try this CSS
    Code:
    <style type="text/css">
    <!--
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    body {
    	text-align:center; /* center #pageWrapper IE 5.x */
    	font:normal 85%/140% arial,helvetica,sans-serif;
    	color: #FFF;
    }
    
    #pageWrapper {
    	width:898px; /* 900px */
    	margin:0 auto;
    	color: #FFF;
    	text-align: left;
    	background: #FFF;
    }
    
    .mainMenu {
    	background:url(images/topnavbg-main.gif) 0 8px no-
    
    repeat;
    	padding:8px 16px;
    	height:1%; /* holly hack, trip haslayout, wrap 
    
    floats IE */
    }
    
    .mainMenu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 100%; /* Width of Menu Items */
    }
    
    .mainMenu ul li {
    	display:inline; 
    float:left;
    	position: relative;
    }
    
    /* Drop down menu */
    .mainMenu li ul {
    	left: 0;top:100%;
    	margin-left:-999em;position:absolute;
    }
    .mainMenu ul li li{float:none;display:block;}
    
    
    /* Styles for Menu Items */
    .mainMenu ul li a {
    	display: block;
    	float: left;
    	text-decoration: none;
    	color: #FFF;
    	background: #06C url(images/btndown.gif); /* IE6 
    
    Bug */
    	padding: 10px;
    }
    
    .mainMenu ul li a:hover {
    	display: block;
    	text-decoration: none;
    	color: #FFF;
    	background: #3852E9;
    	padding: 10px;
    }
    
    /* Holly Hack. IE Requirement \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
     /* The magic */
    .mainMenu li:hover ul, .mainMenu li.over ul {
    margin-left:0;
    	background: #06C url(images/btndown.gif);
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    .clearfix{zoom:1;}
    -->
    </style>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am unable to view video on this computer, Zarin Denatrose, however thanks for your help anyway.

    RyanReese, having overflow:hidden; in the mainMenu class, is the only way I have made the horizontal bar appear in full. Do you know of another way of making the horizontal bar appear in full width and height? Everything else looks good.

  5. #5
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing, the each page button appears bigger in height than the horizontal bar. Can someone please help me fix this?

    Please see the previous reply as well.

  6. #6
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just fixed the things which I needed to solve.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sorry we were so slow in responding, saturday night .

    Do you have any more issues? You indicated you solved them.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •