Forums

meals303

Hi there,

I have been tweeking a horizontal drop down menu using html/css to work on IE6/7 & Firefox 2/3 etc.

I have tweaked so much that when the cursor is hovering over the main navigation e.g About button, to then show a drop down menu, the dropdown menu moves to the left of the About button instead of under it.

Does anyone know how to rectify this, as I have lost the dashed lined under each dropdown link, and I don't know how to fix it. I would be most grateful for any help!!

<div id=\"wrapper\">
	<div id=\"header\">
    	
        	<img src=\"emlogo.gif\" alt=\"EEFG\" width=\"382\" height=\"140\" class=\"emlogo\"/>
            <a href=\"http://somewebpage\" title=\"EC\"><img src=\"eulogo.gif\" alt=\"ABC\" 	width=\"110\" height=\"48\" class=\"eulogo\"/></a>
        	<img src=\"searchbar.gif\" alt=\"Search Bar\" width=\"217\" height=\"19\" class=\"search\"/>
            
            <div id=\"mainwrap\">
            	<div id=\"mainnav\">
    				<ul class=\"nav\">
                    	<li><a href=\"about.html\">About</a></li>
                        	<ul>
                            	<li><a href=\"#\">link1</a></li>
                                <li><a href=\"#\">link2</a></li>
                                <li><a href=\"#\">link3</a></li>
                            </ul>
                        </li>                             
                                                            
                        <li><a href=\"course.html\">Course</a></li>
                        	<ul>
                            	<li><a href=\"#\">link1</a></li>
                                <li><a href=\"#\">link 2</a></li>
                                <li><a href=\"#\">link 3</a></li>
                            </ul>
                        </li>
                        
                        <li><a href=\"where.html\">Where</a></li>
                        	<ul>
                            	<li><a href=\"#\">p1</a></li>
                                <li><a href=\"#\">p2</a></li>
                                <li><a href=\"#\">p3</a></li>
                                <li><a href=\"#\">p4</a></li>
                                </ul>
                        </li>
                        
                        <li><a href=\"faqs.html\">FAQs</a></li> <!--- no dropdown link -->
                        
                        <li><a href=\"peeps.html\">Peeps</a></li>
                        	<ul>
                            	<li><a href=\"#\">link1</a></li>
                                <li><a href=\"#\">link2</a></li>
                        	</ul>
                                                                          
                        <li><a href=\"contact.html\">Contact</a></li>
                        </ul>
  
 </div> <!-- End of mainnav -->  
 </div> <!-- End of mainwrap -->
 </div> <!-- End of header -->
 </div> <!-- End of wrapper -->

this is the CSS CODE:

* {
	margin: 0;
	padding: 0;
	}

body {
		background: #9a9983;
		font-family: Arial, Helvetica, sans-serif;
		font-size:12px;
		margin: 0px;
		padding: 0px;
	}
	
#wrapper {
		position: relative;
		background:#FFFFFF;
		margin: 5px auto;
		padding: 0px;
		width: 950px;	
		border: 5px solid #FFFFFF;	
}

#header {
		background: url(topheader02.jpg) top center no-repeat;
		height: 169px;
		margin: 0px;		
}

a	{
		border:0px none;
		color: none;
}


img.emlogo	{
		position: absolute;
		top: 0px;
		left: 20px;
}

.eulogo	{
		position: absolute;
		top: 55px;
		right: 20px;		
}

.search	{
		position: absolute;
		top: 120px;
		right: 20px;		
}

<!--- Main top navigation bar -->

#mainwrap {
		width: 910px;
		height: 18px;
		margin-top: 150px;
		margin-left: 20px;
		padding: 0;
		background-color: #890202;}
		
#mainwrap #mainnav	{
		margin-left: 45px;
		padding: 0;
		height: 1em;
}
	
#mainnav li {
	list-style-type: none;
	padding: 0px;
	float: left; }

#mainnav li a {
	display: inline;
	padding: 3px 8px;
	background-color: #890202;
	color: #fff;
	text-decoration: none; }
	
#mainnav li ul {
	display: none; 
	width: 12em;
	background-color: #d8d6d6;}
	
#mainnav li:hover ul, #mainnav li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
	
#mainnav li:hover li, #mainnav li.hover li {
	float: none; }
	
#mainnav li:hover li a, #mainnav li.hover li a {
	background-color: #d8d6d6;
	border-bottom: 1px dashed #a3a3a3;
	color: #a3a3a3; }
	
#mainnav li li a:hover {
	background-color: #494949;
	color: #ffffff; }

Soh Tanaka

First of all, your HTML is not valid: You have a unordered list and an unclosed list tag spilling out.

<li><a href=\"about.html\">About</a></li>
                           <ul>
                               <li><a href=\"#\">link1</a></li>
                                <li><a href=\"#\">link2</a></li>
                                <li><a href=\"#\">link3</a></li>
                            </ul>
                        </li>

Also, I have not tested but I noticed you didn't have a position:relative; on your parent "#mainnav li". When using absolute positioning, you must have a relative positioning on the parent so it can find the correct 0 x 0 axis :-)

treehouse : what would you like to learn today?

Forums

CSS drop down menu query