Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS newb-- drop-down help, please?

    I'm trying to create a drop down menu using CSS and a touch of java, so far it works pretty nicely, but there seems to be a few bugs I don't like. I simply don't know enough about CSS to track them down myself, so I'm hoping you guys can help. ^_^

    It works well in IE (with a bit of java splashed in to change certain items to the ".over" class as you mouse over), the problems are as follows:

    1a) The boxes and fonts appear to resize on me when you mouse over.
    1b) The drop down portions are not lined up flush with the bottom of the nav bar, so they'll get drawn under the next main entry in the nav bar.
    2) I'd like the nav menu to stretch over the entire div (684 pixels) with equal spacing, I can't seem to get that working.
    3) The nav bar refuses to center itself. I've put it inside a div with "text-align: center;", I've even tried using the HTML <CENTER> tag in a fit of desperation.

    Any help would be fantastic! Thank you.

    Here is my CSS for the drop downs. If need be, I can probably upload my page somewhere so you can view the entire source.

    Code:
    ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    
    #nav li li a {
    	display: block;
    	font-weight: normal;
    	padding: 0.2em 10px;
    }
    
    #nav li li a:hover {
    	padding: 0.5em 0 0.5em 0;
    	border-width: 0 5px;
    }
    
    li {
    	float: left;
    	position: relative;
    	width: auto;
            padding: 0.5em 1em;
    	text-align: center;
    	cursor: default;
    	background-image: url(images/Image8.jpg);
    	border: 1px solid #7d6340;
    	border-width: 1px 0;
    }
    
    li#first {
    	border-left-width: 1em;
    }
    
    li#last {
    	border-right-width: 1em;
    }
    
    li ul {
    	display: none;
    	position: absolute;
    	top: 100%;
    	left: 0;
    	font-weight: normal;
    	background-image: url(images/Image8.jpg);
    	padding: 0.5em 0 0.5em 0;
    	border: 2px solid #7d6340;
    
    }
    
    li>ul {
    	top: auto;
    	left: auto;
    }
    
    li li {
    	display: block;
    	float: none;
    	background-color: transparent;
    	border: 0;
    }
    
    li:hover ul, li.over ul {
    	padding: 0.5em 0 0.5em 0;
    	display: block;
            color: #FFF;
    }
    
    
    li a:visited {
    	color: #000;
    }
    
    li a:active {
    	color: red;
    }
    
    ul li a:hover {
    	text-decoration: underline;
            display: block;
            color: #fff;
            background-color: #000;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    WiglyWorm,

    Have you seen this example:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have, and that's actually what I'm going off of. I've managed to tweak it a fair ammount myself so far, but I think in my tweaking, I caused a few of these problems. The thing is I'm just not quite experienced enough to know where the issues are coming from.. so it's a matter of poke around for two hours or so to find everything. The big thing I don't understand is why my menu resizes itself when I highlight.

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

    Still having problems with this thing resizing when I highlight...


  •  

    Posting Permissions

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