Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS drop down menu query

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 6, 2009 at 9:31 am #24508
    meals303
    Member

    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!!

    Code:
  • Course
  • Where
  • FAQs

  • Peeps
  • Contact

this is the CSS CODE:

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;
}

#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; }

April 6, 2009 at 12:47 pm #55905
Soh Tanaka
Member

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

Code:
  • About

    • 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 :-)

  • Author
    Posts
    • Viewing 2 posts - 1 through 2 (of 2 total)